@import "../css/basic.less";
@import "../css/variables.less";


// chunky
.desc {
    @media screen and (max-width: 768px) {
        display: none!important;
    }
}
.mobile {
    @media screen and (min-width: 768px) {
        display: none!important;
    }
}

.no__scroll {
    overflow-y: hidden;
}

.container { 
    max-width: 1240px; 
    padding: 0 .75rem; 
    width: 100%; 
    position: relative;  
    margin: 0px auto; 
}

.burger-block {
    display: none;
    @media (max-width:768px){
        display: flex;
    }
}

.burger__menu__container {
    position: fixed;
    top: 0;
    width: 100%;
    right: 0;
    height: 100vh;
    overflow: hidden;
    padding: 0 6px 12px;
    background: #23272C;
    box-shadow: 8px 8px 20px rgb(0 0 0 / 7%);
    background-size: 200% 200%;
    transition: all .7s ease;
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transform: translateY(-100vh);
    padding-top: 5vh;
    .header__list {
        display: flex;
        gap: 2rem;
        align-items: start;
        flex-direction: column;
        a {
            font-size:32px;
            color: @grey;
            transition: @transition_1;
            display: flex;
            align-items: center;
            gap: 0 1.2rem;
            svg {
                fill:@dark-red;
                transition: @transition_1;
                width: 16px;
                height: 16px;
            }
            &.actual{
                color: @white;
                font-weight: 700;
                svg {
                    fill:@red;
                }
            }
            &:not(.actual):hover {
                color: @white;
                svg {
                    fill:@red;
                }
            }
        }
    }
    &._open_up {
        transform: translateY(0);
      }    
}

.section-style {
    position: relative;
    padding: clamp(1em,2.5vw,3em) 0;
    overflow-x: hidden;
}

.btn-style {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: @red solid 1px;
    width: fit-content;
    transition: @transition_1;
    gap: .5rem;
    svg { transition: @transition_1;}
    &:hover {
        text-shadow: 0px 0px 1px currentColor;
            >svg{
                transform: translateX(4px);
            }
    }
    @media(max-width:768px){
        width: 100%;
    }
}

.btn-style-grey{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border: @grey solid 1px;
    color: @grey;
    @media(max-width:768px){
        width: 100%;
    }
}

.section__header {
    display: flex;
    align-items: center;
    gap: clamp(0.6rem, 1vw, 1.1rem);
    max-width: 730px;
    flex: 1 0 auto;
    width: auto;
    h2 {
        display: flex;
        align-items: center;
        gap:.4rem;
        font-size: clamp(1.8em,2vw,3em);
        font-weight: 500;
        line-height: 1.02;
        color: @dark-red;
        transition: @transition_1;
        flex: 1 0 auto;
        svg {
            width: clamp(8px,0.7vw,12px);
            height: clamp(8px,0.7vw,12px);
            fill: @dark-red;
            transition: @transition_1;
        }
    }
    p {
        width: 100%;
        height: 2px;
        background: -webkit-linear-gradient(top, @red, @dark-red);
        background: linear-gradient(to bottom, @red, @dark-red);
    }
    &.__active{
        h2{
            color:@red;
            svg {
                fill: @red;
            }
        }

    }
}

.box-style {
    display: flex;
    flex-direction: column;
    border: @main_border;
    flex: 0 1 196px;
    height: fit-content;
    // max-width: 196px;
    h3 {
        padding: 1rem;
        font-size: clamp(20px,1.4vw,24px);
        border-bottom: @main_border;
    }
    ul {
        padding: 1rem;
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        li {
            color: @grey;
        }
    }
    @media(max-width:768px) {
        flex: 1 0 100%;
    }
}

.box {
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border: @main_border;
    gap: 2rem;
    height: fit-content;
    ul {
        display: flex;
        flex-direction: column;
        gap: .5rem;
        li {
            height: auto;
            a {
                display: flex;
                align-items: center;
                gap: .4rem;
                transition: @transition_1;
                color: @grey;
                svg {
                    width: 23px;
                    fill: @grey;
                    transition: @transition_1;
                }
                &:hover {
                    color: @white;
                    >svg {
                        fill: @white;
                    }
                }
            }
        }
    }
    @media(max-width:768px){
        flex: 1 0 100%;
        gap:1.2rem;
        ul {
            gap:1.2rem;
            li a {
                font-size: 23px;
                svg {
                    width: 32px;
                }
                @media(max-width:380px){
                    font-size: 21px;
                }
            }
        }
    }
}

.__item{
    display: flex;
    flex-direction: column;
    flex: 1 0;
    height: fit-content;
    border: @main_border;
    min-width: 310px;
    .pic{
        width: 100%;
        height: 201px;
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .image-grey {
            filter: grayscale(100%);
            opacity: .7;
            transition: @transition_1;
            @media(max-width:480px){
                opacity: 1;
                filter: grayscale(0);
            }
        }
    }
    .list {
        padding: .5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        border-top: @main_border;
        border-bottom: @main_border;
        p {
            color: @grey;
        }
    }
    .bottom-part {
        display: flex;
        flex-direction: column;
        padding: 1.5rem .5rem .5rem ;
        gap: 1rem;
        h3 {
            font-size: clamp(20px,1.4vw,24px);
            text-transform: uppercase;
        }

        p {
            color: @grey;
        }
    }
    &:hover>.pic .image-grey{
        filter: grayscale(0);
        opacity: 1;
    }
}

//header
.header {
    top: 0;
    left: 0;
    right: 0;
    position: fixed;
    width: 100%;
    z-index: 100;
    transition: .25s ease-in-out all;
    backdrop-filter: blur(0);
    &.scrolled  {
        // backdrop-filter: blur(5px);
        background: #23272C;
    }
    .header__inner__style {
        margin: 1rem 0;
        transition: @transition_1;
        &.scrolled2 {
            margin: .3rem 0 .3rem 0!important;
            @media(max-width:768px){
                margin: .8rem 0 .8rem 0!important;
            }
        }
    }
    .header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        .logo{
            display: flex;
            align-items: center;
            width: 100%;
            max-width: 102px;
            transition: @transition_1;
            &.scrolled3{
                max-width: 80px;
                @media(max-width:768px){
                    max-width: 90px;
                }
            }
            img {
                width: 100%;
                object-fit: contain;
            }
            @media(max-width:768px){
                max-width:120px;
            }
        }

        .header__list {
            display: flex;
            align-items: center;
            gap: 0 1rem;
            a {
                font-size:clamp(15px,0.9vw,18px);
                color: @grey;
                transition: @transition_1;
                display: flex;
                align-items: center;
                gap: 0 .2rem;
                svg {
                    fill:@dark-red;
                    transition: @transition_1;
                }
                &.actual{
                    color: @white;
                    font-weight: 700;
                    svg {
                        fill:@red;
                    }
                }
                &:not(.actual):hover {
                    color: @white;
                    svg {
                        fill:@red;
                    }
                }
            }
        }
    }
}

// HERO section
.hero-section {
    position: relative;
    &_wrapper {
        display: flex;
        height: 100vh;
        max-height: 340px;
        margin-top: 8vw;
        gap: clamp(1rem,4vw,2.5rem);
        ._left{
            width: calc(50% - 1rem);
            flex-direction: column;
            display: flex;
            .hero-title {
                display: flex;
                flex-direction: column;
                gap: clamp(2rem,2vw,4rem);
                h1 {
                    font-size: clamp(2em,2vw,3.5em);
                    font-weight: 500;
                    line-height: 1.02;
                    span {
                        color: @red;
                    }
                    em {
                        color:@red;
                    }
                }
                .subtitle {
                    font-size: 1em;
                    line-height: 1.2;
                    width: 80%;
                    color: @grey;
                }
            }
            .hero-button{
                display: flex;
                margin-top: 2vw;
            }
        }
        ._right{
            position: relative;
            width: calc(45% - 1rem);
            justify-content: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            .hero-element-1{
                position: absolute;
                top: 0;
                left: 0;
                max-width: calc(300px - 1em);
                img{
                    width: 100%;
                }
            }
            .hero-triangles {
                position: absolute;
                right: 15%;
                top: 50%;
                width: 25%;
                z-index: 2;
                min-width: 120px;
                img {
                    width: 100%;
                }
                @media(max-width:380px){
                    top: 35%;
                }
            }
            .image-area {
                position: relative;
                display: flex;
                justify-content: center;
                height: 100%;
                width: auto;
                    img {
                        height: 100%;
                        width: 100%;
                        max-height: 500px;
                        object-fit: contain;
                        @media(max-width:430px){
                            max-height: 400px;
                            object-fit: contain;
                        }
                        @media(max-width:380px){
                            height: 200px;
                            width: 120px;
                        }
                    }
            }
        }
        @media(max-width:768px){
            flex-direction: column;
            min-height: 100vh;
            max-height: unset;
            margin-top: 16vh;
            height: 100%;
            ._left{
                width: 100%;
            }
            ._right{
                width: 100%;
                height: 100%;
                max-height: 500px;
                .image-area {
                    max-height: fit-content;
                }
                @media(max-width:430px){
                    max-height: 400px;
                }
                @media(max-width:380px){
                    height: 35%;
                }
            }
        }
        @media(max-width:414px){
            min-height: 85vh;
            // height: fit-content;
        }
        @media(max-width:380px){
            min-height: 80vh;
        }
    }
}

.hero-tag{
    display: flex;
    align-items: center;
    padding:.5rem;
    border: @grey_border;
    gap: .5rem;
    svg {
        fill:@red;
        width: 14px;
        height: 14px;
    }
    p {
        color:@grey;
        span {
            font-weight: 700;
        }
    }
}

//hero side links
.hero-side-links{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    &-wrap{
        display: flex;
        align-items: center;
        flex-direction: column;
        gap:.25rem;
        a {
            svg{
                fill:@grey;
                width: 24px;
                height: 24px;
                transition: @transition_1;

            }
            &:hover>svg{
                fill:@white;
            }
        }
    }
    @media screen and (max-width:1366px){
        display: none;
    }
}

// works section
.works__wrap {
    display: flex;
    flex-direction: column;
    gap:2.8rem;
}

.section__top__wrap {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    .__button{
        display: flex;
        align-items: center;
        a {
            display: flex;
            align-items: center;
            gap:.5rem;
            transition: @transition_1;
            svg{
                transition: @transition_1;
            }
            &:hover{
                text-shadow: 0px 0px 1px currentColor;
                >svg{
                    transform: translateX(4px);
                }
            }
        }
    }
}

.works__examples {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    
}
//skills section    
.skills-inner{
    display: flex;
    margin-top: @block_margin;
    justify-content: space-between;
    gap: 1rem;
    .skill-vector-block {
        display: flex;
        flex: 1 1 auto;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }

    .skills__wrap {
        display: flex;
        flex-wrap: wrap;
        flex: 1 0 auto;
        gap: 1.5rem;
        justify-content: flex-end;
        width: 55%;
        @media(max-width:768px){
            width: 100%;
            flex: 0 1 auto;
        }
    }

    .skills__wrap__about{
        display: flex;
        flex-wrap: wrap;
        gap: 1.5rem;
        width: 100%;
    }
}
// about section
.about-inner {
    display: flex;
    gap: 1rem;
    margin-top: @block_margin;
    height: 400px;
    .about-wrap{
        display: flex;
        flex-direction: column;
        gap: clamp(1.5rem,3vw,2.8rem);
        width: auto;
        p {
            color: @grey;
        }
    }
    .about-image {
        display: flex;
        width: calc(55% - 2rem);
        height: auto;
        flex: 1 0 auto;
        border-bottom: 2px solid @dark-red;
        picture {
            width: 100%;
            img {
                width: 100%;
                height: 100%;
            }
        }
    }
    @media(max-width:768px){
        height: fit-content;
        flex-direction: column;
        gap: 1.5rem;
        margin-top: @block_margin_mobile;
        .about-image {
            width: 100%;
            picture {
                height: 230px;
            }
        }
    }
}
//contacts 
.contacts__inner {
    margin-top: @block_margin;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}
// footer
.footer{
    position: relative;
    padding: 2.8rem 0;
    border-top: 1px solid @grey;
}

.footer__wrap {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    @media(max-width:768px){
        flex-direction: column-reverse;
    }
}

.footer__wrap-left {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    .top {
        display: flex;
        align-items: center;
        gap: 1rem;
        .logo {
            display: flex;
            max-width: 130px;
            img {
                width: 100%;
            }
        }
        a {
            color: @grey;
            transition: @transition_1;
            &:hover {
                color: @white;
            }
        }
    }
    .bottom p {
        color: @grey;
        display: flex;
        align-items: center;
    }
}

.footer__wrap-right {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    .links {
        display: flex;
        align-items: center;
        gap: 1rem;
        a {
            display: flex;
            width: 23px;
            height: fit-content;
            svg {
                fill: @grey;
                transition: @transition_1 ;
            }
            &:hover > svg {
                fill: @white;
            }
        }
        @media(max-width:768px){
            a {
                width: 45px;
                svg {
                    width: 45px;
                    height: 45px;
                }
            }
        }
    }
}
//page
.page__header {
    position: relative;
}
.page__header-wrap{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: @page_margin;
    padding: 2rem 0 .5rem;
}
//slider 
.stages-wrap {
    @media(max-width: 480px){
        display: none!important;
    }
}

.stages-wrap-slider {
    display: flex;
    width: 100%;
    position: relative;
    padding: 3rem 0 0 0;
}

.stages-slider {
    min-width: 0;
    width: 100%;
    margin-right: -25px;
    flex: 1;
}

.stages-slider-pagi {
    position: absolute;
    width: 100%!important;
    height: 18px;
    top: 1%!important;
    left: 50%!important;
    transform: translateX(-50%) !important;
    display: inline-flex;
    align-items: center;
    transition: 0.3s ease;
    justify-content: space-between;
    &:before {
        position: absolute;
        width: 100%;
        height: 1px;
        background-color: @dark-red;
        top: 50%!important;
        transform: translateY(-50%) !important;
        left: 0;
        display: block;
        content: '';
        margin-right: -25px;
        flex: 1;
    }

    .swiper-pagination-bullet {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: @dark-red !important;
        margin: 5px!important;
        opacity: 1 !important;
        transition: 0.3s ease;
    }
    
      .swiper-pagination-bullet-active {
        background: transparent !important;
        position: relative;
        width: 18px;
        height: 18px;
        border: 2px solid @dark-red;
        transition: 0.3s ease;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .swiper-pagination-bullet-active::before {
        content: '';
        display: flex;
        position: absolute;
        background-color: @dark-red !important;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        transition: 0.3s ease;
    }
}
//about__me page
.soft-skills {
    padding: 0 clamp(1rem,2.4vw,2.5rem);
    margin-top: clamp(1rem,1.4vw,2rem);
    li {
        list-style-type: disc;
        color: @grey;
        &::marker{
            color: @dark-red;
        }
    }
}

.experience{
    border: 1px solid @white;
    padding: 1rem clamp(1.2rem,2.4vw,2.5rem);
    margin-top: clamp(1rem,1.4vw,2rem);
    display: flex;
    flex-direction: column;
    width: fit-content;
    li {
        list-style-type: disc;
        color: @grey;
        &::marker{
            color: @dark-red;
        }
        a, span {
            color: @white;
        }
        &:first-child::marker {
            color:transparent;
        }
    }
}

.more-about {
    display: flex;
    flex-wrap: wrap;
    gap:.5rem;
    margin-top: clamp(1rem,1.4vw,2rem);
    p {
        border: 1px solid @grey;
        color: @grey;
        padding: .25rem;
        span {
            color: @white;
        }
    }
}