@media (max-width: 1200px) {
    header{width: 50%;}

    .pCardInfo{flex-direction: column-reverse; align-items: start; gap: 7px;}
    .pInfo{flex-direction: column; justify-content: start; align-items: start; gap: 7px;}
    .pInfo h2{transform: translateY(20px)}

    @keyframes pInfoH2Anim{
        0%{opacity: 0; transform: translateY(20px);}
        150%{opacity: 1; transform: translateX(0);}
    }

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


    .prjCard1 .prjText{padding: 20px;}
}


@media (max-width: 1100px) {
    .projects{justify-content: space-around}

    .prjDiv{flex-direction: column; justify-content: center; padding: 70px 10px 0 10px;}
    .prjLeft{width: 70%;}
    .mediaTitle{display: flex;}

    @keyframes prjRight {
        0%{opacity: 0; transform: translateY(20px);}
        100%{opacity: 1; transform: translateX(0);}
    }
    .prjRight{width: 70%; display: flex; align-items: center; flex-direction: column; margin: 20px 0 20px 0;}
    .prjRight h1, .prjRight .prjBack{display: none;}
    .prjRight p{font-size: clamp(1rem, 1.3vw, 1.3rem);}
    .prjLink{width: 100%;}
    .prjLinkDesktop{display: none;}
    .prjLinkMedia{display: flex;}
    .prjImageMobile{width: 24%;}


    .AjYear{font-size: clamp(1.2rem, 4.6vw, 4.6rem);}


    .prjCard1{
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: 8px;
    }

    .prjCard1 .prjName{
        grid-column: span 3 / span 3;
        grid-column-start: 2;
        grid-row-start: 1;
    }

    .prjCard1 .prjImage{
        grid-column: span 3 / span 3;
        grid-row: span 4 / span 4;
        grid-column-start: 2;
        grid-row-start: 5;
    }

    .prjCard1 .prjText{
        grid-column: span 3 / span 3;
        grid-row: span 3 / span 3;
        grid-column-start: 2;
        grid-row-start: 2;
    }
}

@media (max-width: 1030px) {
    .aContainer{gap: 100px;}    


    /* .eBlock{width: 43%;} */
    .eContainer{gap: 80px;}
    .eCard:nth-child(1){transform: translateX(10%);}
    .eCard:nth-child(2){transform: translateX(-25%);}


    .AjYear{font-size: clamp(1.2rem, 3.5vw, 3.5rem);}
    .AjYear p:nth-child(2){font-size: clamp(0.8rem, 1vw, 1rem);}
    .moreAjYear p{font-size: clamp(1rem, 3vw, 3rem);}
    .AjRight1{transform: translateX(50px);}
    .AjRight2{transform: translateX(0);}
}

@media (max-width: 950px) {
    .AaCard{width: 70%;}
    svg.scrollSvg path{stroke-width: 60;}

    .prjCard1{
        padding: 0px;
        min-width: auto;
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(8, 1fr);
        gap: 0;
    }

    .prjName, .prjImage img, .prjText{margin-bottom: 10px;}
}

@media (max-width: 850px) {
    .navbar{display: none;}
    .burgerContainer{display: block;}

    @keyframes headerActive {
        0%{height: 6vh; width: 40%;}
        100%{height: 97vh; width: 97%;}
    }

    @keyframes headerClosed {
        0%{height: 97vh; width: 97%;}
        100%{height: 6.6vh; width: 40%;}
    }

    header{padding: 10px; width: 40%;}

    header.active{
        width: 97%;
        padding: 10px;
        align-items: start;
        height: 97vh;
        animation: headerActive .4s ease-in-out;
    }

    header.closed{animation: headerClosed .4s ease-in-out; width: 40%;}
    header .logo{margin-left: 5px; & img{width: 45px;}}
    header.active .logo{padding: 8px 0;}
    header.closed .logo{padding: 8px 0;}

    .navbar.active{
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        flex-direction: column;
    }

    .navbar.active li {
        opacity: 0;
        transform: translateY(20px);
        animation: fadeInUp 0.5s ease forwards;
    }
    
    .navbar.active a,
    .navbar.active p{font-size: 40px;}

    @keyframes navbarClosed {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
        100% {
            opacity: 0;
            display: none;
            transform: translate(-60%, -50%);
        }
    }

    .navbar.back {animation: navbarClosed .2s ease-in-out forwards;}

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .navbar.active li:nth-child(1) { animation-delay: 0.1s; }
    .navbar.active li:nth-child(2) { animation-delay: 0.2s; }
    .navbar.active li:nth-child(3) { animation-delay: 0.3s; }
    .navbar.active li:nth-child(4) { animation-delay: 0.4s; }
    .navbar.active li:nth-child(5) { animation-delay: 0.5s; }
    .navbar.active li:nth-child(6) { animation-delay: 0.6s; }
    .navbar.active li:nth-child(7) { animation-delay: 0.7s; }

    @keyframes pagesActive {
        0% {
            opacity: 0;
            transform: translate(-60%, -50%);
        }
        100% {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
    }

    @keyframes pagesClose {
        0% {
            opacity: 1;
            transform: translate(-50%, -50%);
        }
        100% {
            opacity: 0;
            transform: translate(-60%, -50%);
        }
    }


    .eContainer{gap: 35px;}
    .eCard:nth-child(2){transform: translateX(-15%);}
    .eCard:nth-child(4){transform: translateX(-15%);}


    .prjCard{width: 100%; height: 100%;}
    .prjImageTablet, .prjImageMobile {height: 28vw;}
    .prjImageTablet{width: 58%;}
    .prjImageMobile{width: 21%;}
    .titleProjects{margin: 40px 0 0 0;}

    .helloContainer{margin-bottom: 5px;}
    .helloAbout{width: 100%;}

    #projects{
        height: auto;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
    }

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

    .pCardMain:hover .pHoverImg{display: none;}
    .pCardMain:hover .pMainImg {opacity: 1; animation: none;}
    .pCardMain:hover .pInfo h2{opacity: 0; animation: none}
    .pCardMain:hover .pInfo h2:nth-child(2) {animation: none;}

    .pCardMain:hover svg{background-color: #a0a0a0;}
    .pCardMain:hover svg path {transform: translateX(0); stroke: #1a1a1a;}
    .pCardMain:active svg{background-color: #1a1a1a;}
    .pCardMain:active svg path {transform: translateX(5px); stroke: #a0a0a0;}
    .pCardMain:hover .pMainImg {opacity: 1; transform: scale(1);}

    .pCardMain:hover .pHoverImg {opacity: 0; transform: scale(1);}

    .prjCardTitle h2 {transform: translateX(20px);}
    .prjCardTitle svg {transform: translateX(0);}

    
    .titleLine{margin-top: 80px; flex-direction: column-reverse; gap: 20px;}
    .totalPrj{display: none;}
    .totalPrjM{display: block;}
    .navPrj{justify-content: space-between;}
    .navBtn{width: 100%;}
    .navSwitch {width: 90vw;}
    .settingsPrj{
        width: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
    }
}


@media (max-width: 800px) {
    .wSubtitle span{font-size: 5vw; margin-top: 10px;}

    .aContent{width: 90%;}
    .aScrollLine{transform: translateX(-70%);}
    svg#aScrollSvg{width: 200%;}
    svg#aScrollSvg path{stroke-width: 40;}
    .aContainer{flex-direction: column; gap: 30px;}


    @keyframes pMoreInfoContShow{
        0%{display: none; opacity: 0; transform: translateY(50%);}
        1%{opacity: 1;}
        100%{display: block; transform: translateY(36%);}
    }

    @keyframes pMoreInfoContHide{
        0%{display: block; opacity: 1; transform: translateY(36%);}
        100%{display: none; opacity: 0; transform: translateY(50%);}
    }

    .pMoreInfoCont{transform: translateY(36%);}
    .pMIText{flex-direction: column; gap: 20px;}
    .pMITexrMore p{text-align-last: left}
    .pMIText2{width: 80%; margin-left: auto;}

    .prjDiv{padding: 80px 20px 0 20px;}
    .prjLeft{width: 100%;}
    .prjRight{width: 100%; margin: 20px 0 20px 0;}
    .prjTitle2{width: 100%;}
    .prjTitle2 h2{width: 100%; text-align: center;}
    .prjLink a{width: 100%; text-align: center;}
    .prjImageTablet, .prjImageMobile {height: 40vw;}
    .btnsSlider button{font-size: 20px;}
    .prjSliderDot{width: 9px; height: 9px;}


    .skills{margin-top: 30%;}

    .journey{margin-bottom: 50%; margin-top: 30%;}
    .AjCard{
        width: 100%; 
        flex-direction: column; 
        justify-content: center;
        align-items: center;
        gap: 10px;
    }
    
    .AjYear{
        width: 100%;
        text-align: center;
        font-size: clamp(2.5rem, 10vw, 10rem);
    }

    .AjText {width: 100%; gap: 5px;}
    .AjText h3{font-size: clamp(1.1rem, 2vw, 2rem); text-align: left; margin-left: 9px;}
    .AjText p{font-size: clamp(0.9rem, 2vw, 2rem); text-align: left; margin-left: 9px;}

    .AjRight1{flex-direction: column-reverse; transform: translateX(0);}
    .AjRight2{flex-direction: column-reverse; transform: translateX(0);}
    
    .AjText {
        width: 100%;
        padding: 15px 5px;
        text-align: center;
    }

    .moreAjYear{display: flex; align-items: center; justify-content: center; flex-direction: row; gap: 10px;}
    .AjYear p:nth-child(2), .moreAjYear p{font-size: clamp(1rem, 4vw, 4rem);}


    .projects{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
        margin: 40px 0;
        overflow: visible;
        height: auto;
        margin-bottom: 150px;
    }
} 


@media (max-width: 740px) {
    .cookie{padding: 18px 0;}
    
    .cookieContent{
        width: 85%;
        padding: 15px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    
    .cookieContent h2{
        font-size: 1rem;
        margin-bottom: 5px;
    }

    .cookieContent p.cookieText{
        width: 100%;
        white-space: normal;
        margin: 0;
        cursor: default;
    }

    .cookieTooltip{display: none !important;}

    .cookieBtns{
        width: 100%;
        justify-content: center;
        gap: 10px;
    }

    .cookieBtns button{
        padding: 8px 20px;
        font-size: 0.9rem;
        width: 100%;
        &:active, &:hover{transform: scale(1);}
    }

    .cookieClose{
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .changeLang{padding: 18px 0;}
    .changeLangContent{width: 85%; padding: 15px; gap: 10px; flex-direction: column; align-items: center;}
    .changeLangContent div{
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 10px;
    }
    .changeLangContent h2 {font-size: 1rem; margin-bottom: 5px;}
    .changeLangContent select, .nextCL {width: 100%; padding: 8px; font-size: clamp(0.8rem, 0.9vw, 0.9rem);}
    .closeCL{
        width: 25px; height: 25px;
        position: absolute;
        top: 10px;
        right: 10px;
    }

    .dev{margin-bottom: 100px;}

    #about{margin-top: 50px; min-height: 70vh;}
    .sContainer{margin-top: 20px; gap: 50px;}
    /* .svgWrapper1, .svgWrapper2, .svgWrapper3, .svgWrapper4 {left: 50% !important;} */
    #projects .btn{margin-top: 3%;}
    .pTech.react {top: 20vh; left: -30vw;}

    /* .eCard {
        width: 80%;
        position: relative;
        align-items: center;
        left: 50%;
        transform: translateX(-50%);
        margin: 20px 0;
        padding: 15px;
        box-sizing: border-box;
    }

    .eCardTitle2{text-align: center;}
    .eBlock{width: 100%;}  */

    #services{margin-bottom: 200px; justify-content: start; height: auto;}
    .sCardWrapper{width: auto;}
    .sCard{width: auto;}
    .sCard:nth-child(odd) {
        align-self: start;
        margin-left: 0;
        margin-right: 0;
        transform: translateY(0);
    }
    .sCard:nth-child(even) {
        align-self: start;
        margin-right: 0;
        margin-left: 0;
        transform: translateY(0);
    }

    .pCardTitle{gap: 20px;}
    .pCardImages img{width: 100px; height: 65px; border-radius: 10px;}
    .pCardMainMini:hover .pCardImg4{display: none;}
    .pCardMainMini:hover .pCardImg3{display: none;}
    .pCardMainMini .pCardImg4{display: none;}
    .pCardMainMini .pCardImg3{display: none;}

    .pMIIText p{width: 90%;}
    .pMITechs{width: 80%;}
    .pMoreInfo img{border-radius: 20px;}

    .eContainer{gap: 50px; justify-content: start;}
    .eScrollLine{width: 170%; left: -50%;}
    .eYear h1{font-size: clamp(2.5rem, 4vw, 4rem); white-space: nowrap;}
    .eBlock{width: 100%;}
    .eCard:nth-child(1){transform: translateX(0);}
    .eCard:nth-child(2){transform: translateX(0); flex-direction: row-reverse;}
    .eCard:nth-child(3){transform: translateX(0)}
    .eCard:nth-child(4){transform: translateX(0); flex-direction: row-reverse;}

    .cContainer {grid-template-columns: repeat(2, 1fr);}
}

@media (max-width: 700px) {
.dev {
    overflow: visible !important;
    padding: 0 20px;
    left: 0;
    right: 0;
    margin-left: 0;
    margin-right: 0;
    width: 100%;
}

.dev h1 {
    min-width: auto;
    width: max-content;
    transform: translateX(0) !important;
    left: 0;
    padding: 0 20px;
}
}

@media (max-width: 663px) {
    .eContainer{justify-content: center; gap: 100px;}
    .eScrollLine{left: -60%; width: 250%;}
    .eYear h1{font-size: clamp(2.5rem, 4vw, 4rem);}
    .doubleEYear{display: flex; flex-direction: row; gap: 7px;}
    .doubleEYear h1{width: auto; font-size: clamp(1rem, 4vw, 4rem);}
    .doubleEYear span{font-size: clamp(1rem, 4vw, 4rem);}
    .eCard {width: 90%;}
    .eCard{flex-direction: column;}
    .eCard:nth-child(2){flex-direction: column-reverse;}
    .eCard:nth-child(4){flex-direction: column-reverse;}

    .Aeducation{width: auto; height: 100%;}
}

@media (max-width: 650px) {
    #about{scroll-margin-top: 100px;}

    .eBlock{width: 100%;}

    .pTech.node {top: 20vh; right: -30vw;}
    .pTech.mysql {top: 30vh; left: 10vw;}
    .pTech.css {bottom: -40vh; right: 35vw;}
    .pTech.python{bottom: 5vh; left: 20vw;}

    .prjImageTablet, .prjImageMobile {height: 40vw;}
    .prjImageTablet{width: 60%;}
    .prjImageMobile{width: 21%;}


    .prjName h2 br{display: block;}
    .prjName h2 span{display: none;}
} 

@media (max-width: 550px) {
    .projects{
        grid-template-columns: 1fr;
        gap: 60px;
        margin: 20px 0;
        overflow: visible;
        height: auto;
        margin-bottom: 150px;
    }
    
    header{width: 60%; border-radius: 23px;}
    header.closed{width: 60%;}
    header.active{width: 95%;}

    .lWrapper{right: 20px; bottom: 20px;}
    .lConsole{padding: 20px;}
    .lWrapper .lCircle{width: 30px; height: 30px;}

    .counter{font-size: 30vw;}

    @keyframes headerActive {
        0%{height: 6vh; width: 60%;}
        100%{height: 97vh; width: 95%;}
    }

    @keyframes headerClosed {
        0%{height: 97vh; width: 95%;}
        100%{height: 6vh; width: 60%;}
    }

    section{padding: 0 20px;}
    #about{padding: 0 20px; padding-bottom: 100px;}
    .aScrollLine{width: 150vw; height: 80%;}
    .aContent{width: 100%;}
    .pTech.react {top: 18vh; left: -25vw;}
    .eContainer{gap: 50px;}
    
    .pMIHeaderLinks a{display: none;}
    .pMIHeaderLinksM{display: flex;}
    .pMIText2{width: 90%;}

    #projects{scroll-margin-top: 60px;}
    .pContainer h1{text-align: center;}

    #contact{padding: 0 20px; margin: 0;}
    .cContainer a{&:hover{transform: none;} &.active{transform: scale(1.1);}}
    .cContainer a {min-width: 100px;}

    .fContent{padding: 20px 0 0 0;}
    .fContent{flex-direction: column; gap: 20px;}
    .fBigText{height: 80px; padding: 0;}
    .fBigText h1{padding: 0 40px; transform: translateY(15%);}
    /* .fColumns{flex-direction: column; gap: 20px;}
    .fColumn h2{margin-bottom: 0;}
    .fColumn ul{display: none; padding: 5px 0 5px 20px;}
    .fColumn ul li a{font-size: 18px;}
    @keyframes fColumnUl {
        0% {
            opacity: 0;
            transform: translateY(-20px);
        }
        100% {
            opacity: 1;
            transform: translateY(0);
        }
    }
    .fColumn ul.active{display: flex; flex-direction: column; margin-top: 10px; max-height: 300px; }
    .fColumn ul.active li{animation: fColumnUl .2s ease-in-out forwards;}
    .fTitle{
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        border-bottom: 1px solid #5a5a5a;
        padding-bottom: 10px;
        &.active{padding-bottom: 0;}
    }
    .fTitle p svg {
        display: block;
        transition: transform 0.3s ease;
    }
    .fRight{
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
        border-top: none;
    } */


    .projects.err{height: 40%; margin-top: 40px; align-items: start;}
    .projectsLive{height: 40%; margin-top: 40px; justify-content: start;}
    .filterPrj{
        z-index: 10;
        width: 90vw;
        height: 83dvh;
        border-radius: 30px;
        backdrop-filter: blur(25px);
        -webkit-backdrop-filter: blur(25px);
        margin: 80px auto;
        inset: 0;
        transform: translate(-200%, -100%);
        
    }
    .btnPrjReset{border-radius: 20px;}
    
    @keyframes filterSlideIn {
        0% {
          opacity: 0;
          transform: translateY(100%);
        }
        100% {
          opacity: 1;
          transform: translateX(0);
        }
    }
      
    @keyframes filterSlideOut {
        0% {
            opacity: 1;
            transform: translateX(0);
        }
        100% {
            opacity: 0;
            transform: translateY(100%);
        }
    }

    .sortPrj select{font-size: 16px;}
    .btnFilter{font-size: 16px;}


    .prjImageTablet, .prjImageMobile {padding: 6px;}
    .prjImage{padding: 6px;}


    .AaCard{
        padding: 30px 30px;
        width: 80%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .AaCard .AaEmojy{font-size: clamp(2.6rem, 2.2vw, 2.2rem);}
    .AaCard p{text-align: center;}


    .questionCard{width: 80%; padding: 25px;}
    .questionCard ul {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 14px;
        padding: 0;
        margin: 0;
        list-style: none;
        justify-items: center;
        align-items: stretch;
    }

    .questionCard ul li {
        width: 100%;
        box-sizing: border-box;
        cursor: pointer;
        padding: 15px 0;
        color: #969494;
        font-size: clamp(1rem, 1.2vw, 1.2vw);
        font-family: 'Inter', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 20px;
        background-color: #2a2929;
        transition: all .3s ease;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .questionCard ul li.wide {
        grid-column: 1 / -1;
        white-space: normal;
        text-overflow: unset;
        overflow: visible;
    }

    .AqClosedDiv{display: block;}
    .clickOutside{display: none;}

    .changeTheme{display: none;}
}

@media (max-width: 500px) {
    svg.scrollSvg path{stroke-width: 50;}
    svg#eScrollSvg path{stroke-width: 40;}

    .pTech.node {top: 24vh; right: -25vw;}
    .pTech.mysql {top: 30vh; left: 5vw;}

    .eScrollLine{left: -80%; width: 300%;}
}

@media (max-width: 450px) {
    .pTech.react {top: 20vh; left: -15vw;}
    .pTech.js {bottom: 20vh; left: -6vw;}
    .pTech.ts {bottom: 10vh; right: 30vw;}
    .pTech.node {top: 29vh; right: -25vw;}
    .pTech.mysql {top: 37vh; left: 4vw;}
    .pTech.css {bottom: -45vh; right: 35vw;}
    .pTech.python{bottom: 12vh; left: 23vw;}

    #services{justify-content: start;}

    .pMoreInfoCont{margin: 10px;}
}

@media (max-width: 400px) {
    .fBigText{height: 50px; padding: 0;}
    .fBigText h1{padding: 0 40px; transform: translateY(15%);}
}