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

html{
    scroll-behavior: smooth;   
}

::selection{
        color: rgb(255, 255, 255);
        background: #518bbb3f;
    }
::-moz-selection {
    color: rgb(255, 255, 255);
    background: #518bbb3f;
}

body{   
    /*  */
    display: block;
    background: #17192c;
    color: #fff;
    min-width: 234px;
    width: 100% !important;
    overflow-x: hidden;
}

body,button,input,textarea{
    font-family: 'Cabin Condensed', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.swiper-container-free-mode .swiper-wrapper {
    transition-timing-function: linear;
}

.fadeblock{
    animation: fadeblock 1s ease;
}

@keyframes fadeblock {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }

}

#page{
    height:100% !important;

    width:100% !important;
}

section {
    padding: 15px;
    width: 100% !important;
}


.pageControl{
    height: 25px;
}



.nav-set{
    position: absolute;
    top: 0;
    width: 100%;
    transition: .7s ease all;
    z-index: 999;
}

.scroll-top-container{
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-50%, 0%);
    position: fixed;
    bottom: 10px;
    left: 50%;
    
    z-index: 990;
}




.scroll-top-btn{
    display: none;
    border: 2px solid #8172B9;
    background: #262244;
    color: #fff;
    border-radius: 10%;
    font-size: 24px;
    height: 50px;
    width: 50px;
    cursor: pointer;
    overflow: hidden;
    
}

.scroll-top-btn i{
    position: relative;
    top: 0;
    margin: auto;
}




section .container{
    padding-top: 100px !important;
}

nav{
    display: none;
}



.nav-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1400px;    
    padding: 20px 0;
    margin: auto;
    border-radius: 5px;     
    transition: .5s ease top;
    
}

.beforeunloads{
    position: relative;
    width: 100% !important;
    overflow-x: hidden;

}

.nav-menu-header{
    display: none;
}

i{
    margin-right: 8px;
}




.nav-link{
    color: #fff;
    text-align: left;
    padding-bottom: 20px;
    text-decoration: none;
    padding-right:30px;
    font-size: 18px;
    color: #ffffff;
    z-index: 1;
    transition: .3s opacity;
}

.nav-link:hover .link-numbers{
    color: #fff !important;
}

.nav-link-settings{
    display: flex !important;
    opacity: 1 !important;
    transform: scale(1) !important;
}

.nav-links{
    align-items: center;
    gap: 35px;
}

.nav-links-effect-container{
    position: relative;
    display: flex;
    align-items: center;
}

.dropws{
    position: relative;
    padding: 12px !important;
}



.dropdown-c{
    position: absolute;
    display: flex;
    flex-direction: column;
    background: #262345;
    border: 2px solid #8172B9;
    top: 0;
    left: 0;
    border-radius: 5px;
    transform: scale(0);
    opacity: 0;
    width: 100%;
    transform-origin: top right;
    transition: .3s ease all;
}
.dropdown-c a{
    display: flex;
    align-items: center;
    width: 100%;
    color: #fff;
    text-decoration: none;
    padding: 10px;
}
.dropdown-c a:hover{
    background: #00000050;
}
.dropws:hover .dropdown-c {
    transform: scale(1);
    opacity: 1;
}

.link-numbers{

    font-size: 15px;
    font-family: 'Inconsolata', monospace;
    text-align: right;
    color: #fff;
    opacity: .50;
    transition: .3s;
}

.wp-ab2{
    display: none;
}

@media screen and (max-width:1150px) {
    .wp-ab2 {
            display: flex;
            align-items: center;
            justify-content: center;
            position: fixed;
            bottom: 10px;
            right: 10px;
            height: 55px;
            width: 55px;
            font-size: 44px;
            text-decoration: none;
            z-index: 999;
            background-color: #24CC63;
            border-radius: 50%;
            color: #fff;
            box-shadow: 0 0 15px #00000020;
            animation: idle2 2.3s ease infinite;
        }
    
        .wp-ab2 img {
            margin-top: 10px;
            
        }
}
@keyframes idle2 {
    0% {
            box-shadow: 0 0 15px #00000020;
        }
    
        50% {
            box-shadow: 0 0 35px #ffffff75;
        }
    
        100% {
            box-shadow: 0 0 15px #00000020;
        }
}
.slash{
    visibility: hidden;
    letter-spacing:4px;
}

.nav-title{
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 24px;
    width: 30%;
}

.link-anim-set{
    position: relative;
    top: 0;  
    overflow: hidden;
}

.link-anim-set-p{
    position: relative;
    top: 0;
    transform-origin: bottom left;
}

.animated-text span,.animated-text-d span{
    position: relative;   
}

.animated-text{
    position: relative;
    animation: fadess ease-in-out 2.5s;
}
.animated-text-d {
    position: relative;
    animation: fadess ease-in-out 3.5s;
}

@keyframes fadess {
    from{
        opacity: 0;
    }

    to{
        opacity: 1;
    }
}

.animated-text span:nth-child(1){
    animation: topBom ease-in-out .5s;
}
.animated-text span:nth-child(2) {
    animation: topBom ease-in-out .6s;
}
.animated-text span:nth-child(3){
    animation: topBom ease-in-out .7s;
}
.animated-text span:nth-child(4) {
    animation: topBom ease-in-out .8s;
}
.animated-text span:nth-child(5){
    animation: topBom ease-in-out .9s;
}
.animated-text span:nth-child(6) {
    animation: topBom ease-in-out 1s;
}
.animated-text span:nth-child(7){
    animation: topBom ease-in-out 1.1s;
}
.animated-text span:nth-child(8) {
    animation: topBom ease-in-out 1.2s;
}
.animated-text span:nth-child(9){
    animation: topBom ease-in-out 1.3s;
}
.animated-text span:nth-child(10) {
    animation: topBom ease-in-out 1.4s;
}
.animated-text span:nth-child(11) {
    animation: topBom ease-in-out 1.5s;
}
.animated-text span:nth-child(12) {
    animation: topBom ease-in-out 1.6s;
}
.animated-text span:nth-child(13) {
    animation: topBom ease-in-out 1.7s;
}
.animated-text span:nth-child(14) {
    animation: topBom ease-in-out 1.8s;
}
.animated-text span:nth-child(15) {
    animation: topBom ease-in-out 1.9s;
}

/* home-titles h3 option */

.animated-text-d span:nth-child(1) {
    animation: topBom ease-in-out 2s;
}

.animated-text-d span:nth-child(2) {
    animation: topBom ease-in-out 2s;
}

.animated-text-d span:nth-child(3) {
    animation: topBom ease-in-out 2.1s;
}

.animated-text-d span:nth-child(4) {
    animation: topBom ease-in-out 2.1s;
}

.animated-text-d span:nth-child(5) {
    animation: topBom ease-in-out 2.2s;
}

.animated-text-d span:nth-child(6) {
    animation: topBom ease-in-out 2.2s;
}

.animated-text-d span:nth-child(7) {
    animation: topBom ease-in-out 2.3s;
}

.animated-text-d span:nth-child(8) {
    animation: topBom ease-in-out 2.3s;
}

.animated-text-d span:nth-child(9) {
    animation: topBom ease-in-out 2.4s;
}

.animated-text-d span:nth-child(10) {
    animation: topBom ease-in-out 2.4s;
}

.animated-text-d span:nth-child(11) {
    animation: topBom ease-in-out 2.5s;
}

.animated-text-d span:nth-child(12) {
    animation: topBom ease-in-out 2.5s;
}

.animated-text-d span:nth-child(13) {
    animation: topBom ease-in-out 2.5s;
}

.animated-text-d span:nth-child(14) {
    animation: topBom ease-in-out 2.6s;
}

.animated-text-d span:nth-child(15) {
    animation: topBom ease-in-out 2.6s;
}
.animated-text-d span:nth-child(16) {
    animation: topBom ease-in-out 2.6s;
}
.animated-text-d span:nth-child(17) {
    animation: topBom ease-in-out 2.7s;
}
.animated-text-d span:nth-child(18) {
    animation: topBom ease-in-out 2.7s;
}
.animated-text-d span:nth-child(19) {
    animation: topBom ease-in-out 2.7s;
}
.animated-text-d span:nth-child(20) {
    animation: topBom ease-in-out 2.7s;
}
.animated-text-d span:nth-child(21) {
    animation: topBom ease-in-out 2.8s;
}
.animated-text-d span:nth-child(22) {
    animation: topBom ease-in-out 2.8s;
}
.animated-text-d span:nth-child(23) {
    animation: topBom ease-in-out 2.8s;
}
.animated-text-d span:nth-child(24) {
    animation: topBom ease-in-out 2.8s;
}

@keyframes topBom{
    from{
        opacity: 0;
        top: 100px;
    }
    to{
        opacity: 1;
        top: 0;
    }
}


.c0::before{
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: link-flashEffect ease-in-out .8s 1;
}
.c1::before{
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: link-flashEffect ease-in-out 1s 1;
}
.c2::before{
    content: "";
    position: absolute;
    top: 0;
    left: -200%;
    width: 100%;
    height: 100%;
    background: #fff;
    animation: link-flashEffect ease-in-out 1.2s 1;
}

@keyframes link-flashEffect {
    0%{
        left: -200%;
    }

    50%{
        left: 0;
    }
    100% {
        left: 400%;
    }
}


.up1 {
    animation: upstart ease-in-out .6s 1;
}

@keyframes upstart {
    from{
        opacity: 0;
    }
    to{
        opacity: 1;
    }
}


.p1{
    animation: link-anim ease-in-out .6s 1;
}
.p2 {
    animation: link-anim ease-in-out .8s 1;
}
.p3 {
    animation: link-anim ease-in-out 1s 1;
}
.p4 {
    animation: link-anim ease-in-out 1.2s 1;
}
.p5 {
    animation: link-anim ease-in-out 1.3s 1;
}
.p6 {
    animation: link-anim ease-in-out 1.4s 1;
}
.p7 {
    animation: link-anim ease-in-out 1.5s 1;
}
.p8 {
    animation: link-anim ease-in-out 1.6s 1;
}
.p9 {
    animation: link-anim ease-in-out 1.7s 1;
}
.p10 {
    animation: link-anim ease-in-out 1.8s 1;
}
.p11 {
    animation: link-anim ease-in-out 1.9s 1;
}
.p12 {
    animation: link-anim ease-in-out 2s 1;
}


@keyframes link-anim{
    0%{
        transform: scale(.5);
        
        top: 100px;
        opacity: 0;
    }
    
    33%{
    
        opacity: 0.50;
    }
    100%{
        opacity: 1;
        top: 0px;
    }
}

.download-cv {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    text-align: center;
    text-decoration: none;
    width: 165px;
    height: 50px;
    background: #46377a50;
    color: #fff;
    border: 2px solid #8172b9;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    z-index: 1;
    overflow: hidden;
    transition: .4s ease transform;
}

.okbtn {
    background: #2bc42b50;
    border: 2px dotted #72b98f;
}
.formspree{
    display: flex;
    align-items: center;
    gap: 5px;
    color: #f1f1f1;
}
.formspree img{
    width: 40px;
    border-radius: 50%;
}

.fade-r {
    animation: fade-r ease .5s;
}
.topbtns22{
    display: flex;
    align-items: center;
    gap: 10px;
}
@keyframes fade-r {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.download-cv:hover {
    box-shadow: 0 0 15px #00000080;
    border: 2px solid #8172b9;
}

.download-cv:active {
    transform: scale(0.90);
    box-shadow: 0 0 15px #00000080;
    border: 2px solid #8172b9;
}

.okbtn:hover,.okbtn:active{
    background: #41d34150;
    border: 2px dotted #569470;
    transform: scale(0.90);
}



.spinner-anim {
    position: relative;
    top: 0;
    animation: transformspin 1s ease;
}

@keyframes transformspin {
    0% {
        top: 100px;
    }

    100% {
        top: 0;
    }
}

.spinner {
    display: flex;
    align-items: center;
    animation: rotate 1s linear infinite;
    z-index: 2;
    width: 27px;
    height: 27px;
}

.spinner .path {
    stroke: #ffffff;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}

@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

.download-cv i {
    font-size: 19px;
}

.download-cv::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 100%;
    width: 100%;
    height: 100%;
    transform: rotate(-320deg);
    background: #8172b9;
    z-index: -1;
}
.flag{
    display: flex;
    align-items: center;
    gap: 5px;
    width: auto !important;
    padding: 0 10px;
}
.flag::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 100%;
    width: 100%;
    height: 100%;
    transform: rotate(-320deg);
    background: transparent !important;
    z-index: -1;
    animation: none 1.2s ease infinite !important;
}

.download-cv::before {
    animation: flashEffect 1.2s ease infinite;
}

.okbtn::before {
    content: "";
        position: absolute;
        bottom: 0px;
        left: 100%;
        width: 100%;
        height: 100%;
        transform: rotate(-320deg);
        z-index: -1;
        background: #569470;
}

.okbtn:hover::before {
    animation: flashEffect 1s ease 3;
}

@keyframes flashEffect {
    0% {
        left: -100%;
    }

    100% {
        left: 100%;
    }
}

.download-text {
    display: flex;
    align-items: center;
    gap: 5px;
    position: relative;
    top: 0;
    transition: .6s;
    animation: downloadText ease .7s;
}

.submit-text {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
    transition: .6s;
    animation: downloadText ease .7s;
}

@keyframes downloadText {
    from {
        opacity: 0;
        top: 100px;
    }

    to {
        opacity: 1;
        top: 0px;
    }
}


.profile-img{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;


}

.profile-img img{
    height: 50px;
    width: 50px;

}

.type-bar, .job-bar{
    position: relative;
    font-size: 18px;
    margin-right:3px;
    color: #f1f1ff;
}

.typewriting {
    display: flex;
    align-items: center;
    margin:5px 0 0;
}

.job-bar::after{
    content: "";
    position: absolute;
    top: 0;
    right: -2px;
    height: 100%;
    width: 2px;
    background: #fff;
    animation: blink 0.7s ease infinite;
}

@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

  .menu-btn {
      display: none;
  }


.container{
    display: flex;
    max-width: 1400px;
    padding: 50px 0;
    margin: 50px auto;

}

header .container {
    justify-content: flex-start;
    text-align: left;
}



.about-header{
    width: 100%;
}

.home-hi  h6{
    font-size: 24px;
    padding: 15px 0;
    font-weight: 400;
    color: #b3b3b3;
}

.home-p{

    width: 100%;
}

.home-p p{
    padding: 20px 0;
    color: #dbdbdb;
    font-size: 22px;
}


.home-name  h1 {
    font-size: 64px;
    color: #fff;
}

.home-name  h3 {
    font-size: 32px;
    font-weight: 400;
    color: #dbdbdb;
    padding: 5px 0;
}

section .container {
    justify-content: space-between;
}

.unga{
    background-color: #16182a;
        opacity: 1;
        background-image: linear-gradient(#1a1c30 1.7000000000000002px, transparent 1.7000000000000002px), linear-gradient(to right, #1a1c30 1.7000000000000002px, #16182a 1.7000000000000002px);
        background-size: 34px 34px;
}



.short-resume-i1{
    position: relative;
    width: 100%;
    width: 50%;
    height: 350px;
    background: #23272E;
    background-size: 130%;
    border-radius: 5px;
    box-shadow: 0 0 5px #00000050;
    margin-left: 30px;
    margin-top: 85px;
    animation: fadess ease 1s 1;
    transition: 1s ease;
    z-index: 1;
}

.link-anim-fade{
    visibility:hidden;
    animation: fade-c ease-in-out 1.5s 2.5s;
}



@keyframes fade-c {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes fade-up{
    from{
        top: -50px;
        opacity: 0;
    }

    to{
        top: 0;
        opacity: 1;
    }
} 


.short-resume-i1{
    font-family: 'Inconsolata', monospace;
}

.tab-container{
    display: flex;
    align-items: center;
    min-width: 500px;
}
.tab{
    font-size: 14px;
    font-weight: 300;
    background: #1a1f25;
    border-bottom: 1px solid transparent;
    padding:5px 20px;
    color: #8a8a8a;
}

.tab-active{
    color: #dbdbdb;
    background: #424453;
    border-bottom: 1px solid #8c8d99;
}

.code-table-code-container{
    display: flex;
    overflow: hidden;
}

.code-table{
    background: #202444;
    border-radius: 5px;
    overflow: hidden;
}

.code-table-sidenav{
    font-size: 16px;
    text-align: center;
    width: 50px;
    font-family: 'Inconsolata', monospace;
    font-weight: 600;
    color: #6a6b6d;
    background: #1b1e30;
    border-right: 1px solid #4A4D53;
}

.code-table-border{
    position: relative;
    padding-left: 20px;
    animation: fade-up-code ease 1s 1;
    font-size: 16px;
}

.numb{
    padding: 5px;
}

.time-out-code{
    position: relative;
    padding: 5px;
    animation: fade-up-code ease 1s 1;
}

@keyframes fade-up-code {
    from {
        right: -100px;
        opacity: 0;
    }

    to {
        right: 0;
        opacity: 1;
    }
}

.time-out-function-code{
    padding:5px 30px;
    margin-left: 3px;
    border-left: 1px solid #4A4D53;
    min-width: 500px;
}

.settime-out-mar{
    margin-left: 20px;
}

#skills{
    padding-top: 50px;
}

.short-resume-i2 {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -20%;
    right: 5%;
    width: 65%;
    height: 350px;
    background: #23272E90;
    backdrop-filter: blur(3px);
    border-radius: 5px;
    box-shadow: 0 0 3px #00000050;
    transition: .3s ease all;

}


.short-resume-i4 {
    position: absolute;
    top: -5%;
    left: -5%;
    width: auto;
    padding: 10px 25px;
    background-size: 100%;
    border-radius: 50px;
    border: 2px solid #4abb4a;
    background: #1d471d;
    box-shadow: 0 0 15px #00000050;

    animation: fade ease 1.3s 1;

}



@keyframes fade{
    0%{
        transform: scale(0.50);
        opacity: 0;
    }

    50%{
        transform: scale(1.3);
        opacity: 1;
    }
    100% {
            transform: scale(1);
            opacity: 1;
    }
}

.swiper {
    width: 230px;
    height: 270px;
    animation: fade-up-code ease .5s 1;
    
}



.cube{
    box-shadow: 0 0 15px #00000020;
    background: #484c6d;
    
}



.skill-bar-head{
    padding: 10px 0 30px;
    font-size: 22px;
}

.skill-board{
    display: flex;
    align-items: center;
    padding: 15px;
    text-align: left;
}

.other-skills .skill-bar{
    display: flex;
    align-items: center;
    font-size: 18px;
    margin-bottom: 10px;
}

.skill-bar-co{
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 5px;
    height: 40px;
    font-size: 16px;
}

.htmls .skill-bar-dot{
    background-color: #52cf52;
}

.other-skills .skill-bar-dot {
    background-color: #bac1f7;
    margin-right: 10px;
}

.skill-bar-dot{
    height: 12px;
    width: 12px;
    border-radius: 50%;
    box-shadow: 0 0 7px #00000050;
}

.skill-bar-dot-head{
    font-size: 16px;
    text-align: left;
    padding:0px;
}

.skills-header {
    width: 50%;
    text-align: left;
    font-size: 36px;
    z-index: 1;
}

.skill-name h3 {
    color: #fff;
    font-size: 48px;
}

.skill-p h5{
    font-weight: 400;
    color: #dbdbdb;
    font-size: 26px;
}

.section-box-container {
    position: relative;
    text-align: left;
    width: 100%;
}


.section-boxes {  
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
    gap: 30px;

}




.section-boxes-wrap{
    padding: 10px 0;
    width: 30%;
    text-decoration: none;
    height: auto;
    margin-bottom: 20px;
}

.anim-project{
    position: relative;
    height: auto;
    overflow: hidden;
}

.a1{
    animation: project-anm ease-in-out .8s;
}
.a2{
    animation: project-anm ease-in-out 1s;
}
.a3{
    animation: project-anm ease-in-out 1.2s;
}

@keyframes project-anm {
    from{
        opacity: 0;
        top: 400px;
    }
    to {
        opacity: 1;
        top: 0;
    }
}



.experince-header {
    position: relative;
    font-size: 42px;
    z-index: 1;
}
.experince-header-set{
    padding-right:10px;

}

.experince-alt {
    color:#b7b8c1 ;
    margin: 50px 0;
    font-size: 22px;
    width: 70%;
}

.section-title{
    position: relative;
    transition: .3s ease;
    padding: 20px;
    padding-top: 40px;
    background: #35385330;
    border: 1px solid #35385380;
    border-radius: 5px;
    cursor: pointer;
}



.section-title:hover::before {
    background: #35385355;
}




.title-area{
    position: relative;
}

.section-projects-overflow{
    transition: .3s ease;
}

.swiper3{
    transition: .5s ease all;
}



.project-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:20px 10px;
    font-size: 18px;
    color: #abb0d7;
    white-space: nowrap;
    transition: .3s ease all;
}

.project-title {
    border: 1px solid #ffffff50;
    border-radius: 50px;
    background: #2C3343;
    white-space: nowrap;
    font-size: 22px;
    color: #fff;
    transition: .3s ease;
    padding: 10px;
}
.section-box {
    position: relative;
    top: -20px;
    overflow: hidden;
    width: 100%;
    height: 250px;
    border-radius: 8px !important;
}
.section-box img{
    position: relative;
    width: 100%;
    height:100%;
    object-fit: cover;
    background: linear-gradient(to bottom, #000,#00000020);
    border-radius: 8px !important;
    transition: .3s ease all;
}
.section-title{
    position: relative;
    overflow: hidden;
}
.section-box img:hover{
    transform: scale(1.1);
}


.swiper3{
    height: 300px;
    border-radius: 5px;
}
.swiper3 img{
    border-radius: 5px;
}
.interact-zoom-header{
    display: flex;
    align-items: center;
    padding: 30px 0 0;
    color: #c5c6cf;
}

.project-date{
    color: #abb0d7;
}


/*
section .container {
  
} */



.tab-container {
    background-color: #1a1f25;
}

.about-container {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    
}

.about-me-section{
    padding: 20px 0;
    width: 50%;
    color: #878aa1;
    font-size: 18px;
    z-index: 1;
    overflow: hidden;
}




:root{
    --swiper-pagination-bullet-inactive-color: #fff;
}
.swiper-pagination-bullet-active {
    background-color: #fff !important;
    width: 15px !important;
    border-radius: 5px !important;
}


.comment-container{
    width: 100%;
    height: 150px;
    
    margin: 35px 0;
}

.img-section{
    width: 300px;
    height: 300px;
    background:url("../img/u.jpg") #3f4368 no-repeat center;
    background-size: 100%;
    padding: 20px 0;
    border-radius: 5px;
    box-shadow: 15px 15px 0 #2f314b;
    z-index: 1;
}



.about-text{
    margin-bottom: 35px;
    margin-top: 35px;
    font-size: 20px;
  
}


   .form-holder iframe {
       position: absolute;
       top: 0;
       left: 0;
       border-radius: 6px;
       height: 100% !important;
       width: 100% !important;
       z-index: -1;
   }
  

   .form-holder::before {
       content: "";
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: #16182acc;
       z-index: 0;
   }
.bg-sq::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 350px;
    background: linear-gradient(to bottom, transparent, #17192c);
    z-index: 0;
}

.flexstart{
    justify-content: flex-start !important;
}
.skills-bar-about{
    display: flex;
    justify-content: center;
    text-align: center;
    gap: 30px;
    width: 100%;
    border-radius: 5px;
    font-size: 32px;
    margin-bottom: 25px;
}

.social-links{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    line-height: 50px;
    color: #fff;
    background: #262244;
    border: 1px solid #424561;
    border-radius: 5px;   
    transition: .3s ease all;
    text-decoration: none;
}
.social-links i{
    margin: auto;
}


.social-links:nth-child(2):hover{
    background: #0072B1;
}
.social-links:nth-child(3){
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    z-index: 1;
}
.social-links:nth-child(3):hover {
    background: transparent;
}
.social-links:nth-child(3)::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    opacity: 0;
    z-index: -1;
    transition: .3s ease all;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.social-links:nth-child(3):hover::before {
    opacity: 1;
}
.social-links:nth-child(4):hover {
    background: #1DB954;
}
.social-links:nth-child(5):hover,.social-links:nth-child(1):hover {
    background: #ffffff;
    color: #000;
}








.comment-slider-container{
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 100%;
    padding: 20px;
    padding-bottom: 50px;
  
   overflow: hidden;
}



.swiper2 {
    position: relative;
    width: 100%;
    margin: 50px 0;
    border-radius: 5px;
    height: 250px !important;
}



.slider-comments{
    padding-top: 20px;
    margin-left: 20px;
}

.slider-com-artic{
    position: absolute;
    bottom: 10%;
    right: 0;
    font-size: 22px;
    width: 170px;
    text-align: center;
    margin: 10px 0;
    padding: 10px;
    color:#ffffff ;
    text-shadow: 0 0 50px #ffffff;
    border-radius: 5px;
}

.c-slider-img-container{
    margin-bottom: auto;
}

.comm-header{
    display: none;
    position: absolute;
    bottom: 10px;
    right: 5%;
    text-align: center;
    background: transparent;
    width: 100px;
    margin: 10px 0;
    padding: 10px;
        border-radius: 5px;
}
.comment-section-container{
    width: 1400px;

    margin: auto;
}
.comment-section{
    width: 600px;  
    font-size: 18px;
    margin-right: auto;
    overflow: hidden;
}

.coverflow {
    position: relative;
    background: #2D284E;
    border: 2px solid #8172B9;
    border-radius: 8px;  
    box-shadow: 0 0 15px #0000003a;
}

.fa-star{
    font-size: 14px;
    color: #ffa600;
    margin-bottom: 12px;
}
.comment-slider-img{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: #8172b91a;
}
.comment-slider-img img{
    width: 100px;
    height: 100px;
    border-radius: 50%;
}

.comment-slider-com{
    color: #fff;
}
.comment-logo{
    width: 100%;
}

/* neweest */


.contact-form {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    overflow: hidden;
}

.contact-form img {
    position: absolute;
    right: 0;
    object-fit: contain;
    z-index: -2;
}

.contact-form::before {
    content: "";
    position: absolute;
    right: 0;
    height: 100%;
    width: 100%;
    background: radial-gradient(circle, #17192c00 0%, #17192c 40%);
    z-index: -1;
}

.container-c {
    max-width: 1400px;
    margin: auto;
}

.c-name,
.c-email,
.textarea {
    position: relative;
    color: #fff;
    width: 100%;
    padding: 20px 0;
    font-size: 22px;
    margin: 20px 0;
    outline: 0;
    border: none;
    background: transparent;
}

.area{
    position: relative;
}

.area::after{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    margin: 20px 0;
    width: 0%;
    height: 3px;
    background: #8172B9;
    z-index: 1;
    transition: .6s cubic-bezier(0.175, 0.885, 0.32, 1);
}
.area::before {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    margin: 20px 0;
    width: 100%;
    height: 3px;
    background: #353747;
    z-index: 1;
}

.error {
    position: relative;
    transition: .3s ease;
}

.error .area::after{
    content: "";
    position: absolute;
    bottom: 0px;
    left: 0;
    margin: 20px 0;
    width: 100%;
    height: 3px;
    background: #f03e3e;
   z-index: 10;
}


.errmessage-cont{
    display: flex;
    align-items: flex-start;
    overflow: hidden;
    height: 40px;
}





.errmessage{
    position: relative;
    top: 0;
    width: 100%;
    display: none;
    font-size: 16px;
    color: #fa7e7e;
    animation: errormsg ease .4s ;
}



.shake{
    
    animation: shakeBtn ease .1s 4;
}

@keyframes shakeBtn {
    0% {
        left: 0;
    }

    33% {
        left: 5px;
    }

    66% {
        left: -5px;
    }
    100% {
        left: 0;
    }
}

@keyframes errormsg {
    0% {

        opacity: 0;
       top: 100px;
    }
    100% {

        opacity: 1;
        top: 0px;
    }
}


textarea:focus~.area::after,
input:focus ~ .area::after{
    width: 100%;
}


input::placeholder,
textarea::placeholder {
    color: #6c6f8a;
}


.contact-form-flex-r {
    width: 650px;
}

.textarea {
    height: 100px;
    resize: vertical;
    min-height: 100px;
    max-height: 300px;
}

label {
    font-size: 22px;
    color: #b0b2c7;
}

.contact-alt {
    font-size: 22px;
    color: #6c6f8a;
    margin: 50px 0;
    max-width: 650px;
}

.contact-aef {
    position: relative;
    color: #ACADC2;
    text-decoration: none;
    padding: 0 3px;
}



.contact-aef::after{
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0%;
    height: 100%;
    background:#29354F;
    z-index: -1;
    transition: .2s ease;
}

.contact-aef:hover::after {
   
    width: 100%;
}



.mrb10 {
    height: 75px;
}

.btn-container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-bottom: 10px;
}


footer{
    color: #61647a;
    font-size: 22px;
    text-align: center;
    padding:45px 15px;
    
    background: #191B31;
    border-top: 1px solid #424561;
    margin-top: 30px;
}
.credits{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.credits-link{
    margin: 25px;
}

.credits-link img{
    width: 80px;
}
.credits-link a {
    color: #424561;
    text-decoration:none;
    padding:10px;
}

.reveal {
    position: relative;
    transform: translateY(150px);
    opacity: 0;
    transition: 1s all ease;
}

.reveal.active {
    transform: translateY(0);
    opacity: 1;
}

.height100{
    
    min-height: 100vh;
}

/* Referanslar */
.references-grid {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.ref-card {
    border-radius: 16px;
    padding: 18px 18px 16px;
    background: rgba(18, 20, 40, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform .18s ease, border-color .18s ease;
}

    .ref-card:hover {
        transform: translateY(-4px);
        border-color: rgba(99, 255, 165, 0.28);
    }

.ref-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ref-logo-wrap {
    width: 54px;
    height: 54px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
    flex: 0 0 auto;
}

.ref-logo {
    width: 40px;
    height: 40px;
    object-fit: contain;
    filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}

.ref-title {
    font-size: 18px;
    font-weight: 700;
    color: #e8eaf6;
    letter-spacing: .2px;
}

.ref-body p {
    margin: 0;
    color: #bfc0c4;
    line-height: 1.6;
    font-size: 14.5px;
}

/* Responsive */
@media (max-width: 1050px) {
    .references-grid {
        grid-template-columns: 1fr;
    }

    .ref-logo-wrap {
        width: 50px;
        height: 50px;
    }

    .ref-logo {
        width: 36px;
        height: 36px;
    }
}