/* @import "./variable.css"; Using a string */
@font-face {
    font-family: "SF Mono";
    src: url(../assets/font/FontsFree-Net-SFMono-Regular.woff2) format("woff2"),
         url(../assets/font/FontsFree-Net-SFMono-Regular.ttf) format("truetype");
    font-display: swap;
  }
  :root {
      --dark-navy: #020c1b;
      --navy: #0a192f;
      --light-navy: #112240;
      --lightest-navy: #233554;
      --navy-shadow: rgba(2,12,27,0.7);
      --dark-slate: #495670;
      --slate: #8892b0;
      --light-slate: #a8b2d1;
      --lightest-slate: #ccd6f6;
      --white: #e6f1ff;
      --green: #64ffda;
      --green-tint: rgba(100,255,218,0.1);
      --pink: #f57dff;
      --blue: #57cbff;
      --font-sans: "Calibre","Inter","San Francisco","SF Pro Text",-apple-system,system-ui,sans-serif;
      --font-mono: "SF Mono","Fira Code","Fira Mono","Roboto Mono",monospace;
      --fz-xxs: 12px;
      --fz-xs: 13px;
      --fz-sm: 14px;
      --fz-md: 16px;
      --fz-lg: 18px;
      --fz-xl: 20px;
      --fz-xxl: 22px;
      --fz-heading: 32px;
      --border-radius: 4px;
      --nav-height: 100px;
      --nav-scroll-height: 92px;
      --tab-height: 42px;
      --tab-width: 120px;
      --easing: cubic-bezier(0.645,0.045,0.355,1);
      --transition: all 0.5s cubic-bezier(0.645,0.045,0.355,1);
      --hamburger-width: 30px;
      --ham-before: top 0.1s ease-in 0.25s,opacity 0.1s ease-in;
      --ham-before-active: top 0.1s ease-out,opacity 0.1s ease-out 0.12s;
      --ham-after: bottom 0.1s ease-in 0.25s,transform 0.22s cubic-bezier(0.55,0.055,0.675,0.19);
      --ham-after-active: bottom 0.1s ease-out,transform 0.22s cubic-bezier(0.215,0.61,0.355,1) 0.12s;
  }

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

body{
    font-family: var(--font-sans);
    /* width: 100%; */
    /* height: 100%; */
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--navy);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
}

#dynamic-text {
    background: #64FFDA;
    background: repeating-linear-gradient(to right, #64FFDA 0%, #CCD6F6 50%, #495670 50%, #8892B0 0%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: rgba(100,255,219,0.9) 0px 0px 39px;
}
.main {
    width: 100%;
    opacity: 1;
    display: block;
    transition: opacity 1s ease-in;
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    scroll-behavior: smooth;
    height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    /* padding: 0 10rem; */

}
/* Loader ends */

.navbar{
    position: fixed;
    top:0;
    left: -20px;
    right: 30px;
    width: 100%;
    z-index: 100;
    transition: var(--transition);
    list-style: none;
    display: grid;
    grid-template-columns: repeat(12,1fr);
    /* grid-template-rows: 4rem; */
    font-family: var(--font-mono);
    grid-gap: 1rem;
    padding: 1.5rem 2rem;
    justify-items:  center;
}
.navbar >li:nth-child(1){
    grid-column: 1 / span 5;
    padding: 0 1rem;
    justify-self: start;
    align-self: center; 
    color : var(--green) !important;
    margin-left :20px;
}
.navbar >li:nth-child(6) {
    grid-column: span 2
}
.logo__icon{
    grid-column: 1 / span 4;
    padding: 0 1rem;
    justify-self: start;
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
.logo__icon svg {
    filter: drop-shadow(0px 0px 6px rgba(100,255,219,0.8));
    transition: filter 0.2s ease-in-out;
}
.logo__icon:hover svg {
    filter: drop-shadow(0px 0px 10px rgba(100,255,219,1));
}
.navbar__numbering{
    margin: 0;
    padding: 0;
    font-size: .7rem;
    color: var(--green);
}

.navbar__links{
    text-decoration: none;
    color : var(--slate);
    font-size: 0.9rem;
    cursor: pointer;
}
.navbar__links:hover{
    color : var(--green);
}

.hero__section{
    height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 20% 12%;
}
.navbar__resume{
    border : 1px solid var(--green);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
}
.navbar__resume:hover{
    background-color: var(--green-tint);
}
@media (prefers-reduced-motion: no-preference){
    .addn {
        height: var(--nav-scroll-height);
        transform: translateY(0px);
        background-color: rgba(10, 25, 47, 0.85);
        box-shadow: 0 10px 30px -10px var(--navy-shadow);
    }
}

.left{
    position: fixed;
    bottom: 0;
    left: 40px;
    right: auto;
    z-index: 11;
}
.right{
    position: fixed;
    bottom: 0;
    left: auto;
    right: 40px;
    z-index: 11;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.styled__list{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.styled__list > li{
    margin : 0.8rem
}
.styled__list > li >a >svg{
    width: 20px;
    height: 20px;
}
.styled__list::after{
    content: '';
    width: 1px;
    height: 100px;
    background-color: var(--slate);
}
.right-text{
    margin : 0.8rem; 
    font-family: var(--font-mono);
    color: var(--slate);
    text-decoration: none;
    cursor: pointer;
    
}
.orentation{
    writing-mode: vertical-rl; 
    text-orientation: mixed;
}
.right::after{
    content: '';
    width: 1px;
    height: 100px;
    background-color: var(--slate);
}
.hero__section{
    width: 90%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    max-width: 100vw;
    overflow: hidden;
}
.hero__section__text{
    display: flex;
    flex-direction: column;
    font-family: var(--font-sans);
    color: var(--slate);
}
.hero__section__text > h1{
    font-family: var(--font-mono);
    /* margin: 0 0 30px 4px; */
    color: var(--green);
    font-size: clamp(var(--fz-sm),5vw,var(--fz-md));
}
.big__heading{
    margin: 0;
    font-size: clamp(40px, 8vw, 80px);
}
.hero__section__text  span{
    color: var(--light-slate);
    font-weight: 600;
}
.profile-image{
    width: 100%;
    height: 60vh;
    padding: 2rem;
}
section {
    scroll-snap-align: start;
}
.green__color{
    color: var(--green);
}
.p-2{
    padding: 0.75rem 0rem;
}
.w-75__text__decoration {
    width: 80%;
    text-overflow: wrap;
}
.side__icons{
    transition: all .2s ease-in-out;
}
.side__icons:hover {
    /* background-color: chartreuse; */
    transform:translateY(-5px);
    color : var(--green) !important;
    /* transform: scale(1.2); */
}
html{
    scroll-behavior: smooth !important;
}
.about__section {
    min-height: 100vh;
    max-width: 100vw;
    overflow-x: hidden;
    padding: 20% 12%;

}
.about__me{
    display: flex;
    padding: 1rem 1rem 1rem 0rem;
    gap : 2rem;
    color: var(--light-slate)
}
.about__img{
    position: relative;
    margin: auto 1rem;
    z-index: 11;
}
.about__img > img {
    width: 300px;
    height: 300px;
    cursor: pointer;
    transition: all .2s ease-in-out;
}
.about__img > img:hover {
    width: 300px;
    height: 300px;
    transform: translate3d(10px,15px,0);
}
.about__img::after{
    content: "";
    display: block;
    position: absolute;
    top: 20px;
    left: 20px;
    width: 300px;
    height: 300px;
    border-radius: var(--border-radius);
    border : solid var(--green) 2px;
    z-index : -1;
}
/* .number__heading ::before {
    content: '01.';
    display: inline-block;
} */
.numbered{
    font-family: var(--font-mono);
    font-size: clamp(var(--fz-md),3vw,var(--fz-xl));
    color: var(--green);
}
.number__heading {
    font-size: clamp(24px,3vw,var(--fz-xl));
    font-family: var(--font-mono);
    color: var(--lightest-slate);
    line-height: 1.1;

}
.number__heading ::after {
    content: '';
    display: inline-block;
    position: relative;
    top: -5px;
    width: 300px;
    height: 1px;
    margin-left: 1rem;
    background-color: var(--lightest-navy);
}
.about__me__info{

}
.about__me__info>p{
    padding: 0.5rem 0;
    font-size: 1.18rem;
    /* text-align: justify; */
}
.skills-list{
    display: grid;
    grid-template-columns: repeat(2,minmax(140px,200px));
    gap : 0 0.8rem;
    padding: 0;
    overflow: hidden;
    margin: 20px 0px 0px;
    list-style: none;
}
.skills-list li{
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
}
.skills-list li::before{
    content: "▹";
    position: absolute;
    left: 0px;
    color : var(--green);
    font-size: var(--fz-sm);
    line-height: 12px;
}
.sidebar__exp{
    display: inline-block;
    /* height: 300px; */
    margin: 1.4rem;
    border-left: solid 2px var(--light-navy);
    position: relative;
}
.sidebar__exp > div {
    width: 150px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    top : 0px;
    height: 55px;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    padding: 0.85rem 1rem;
    cursor : pointer;
    /* position: relative; */
}
.slider {
    position: absolute;
    top : 0px;
    height: 55px;
    border-left: solid 3px var(--green);
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--green);
    padding: 0.85rem 1rem;
    cursor : pointer;
    transform: translateY(0px);
    transition: all 0.1s ease-in;
}
.move__bottom {
    transform: translateY(55px);
}

.achievements__grid {
    display: flex;
    gap: 3rem;
    padding: 1rem 0;
    flex-wrap: wrap;
}
.achievements__column {
    flex: 1;
    min-width: 240px;
}
.achievements__subtitle {
    font-family: var(--font-mono);
    font-size: var(--fz-sm);
    color: var(--lightest-slate);
    margin-bottom: 1.2rem;
    letter-spacing: 0.05em;
}
.achievements__list {
    list-style: none;
    padding: 0;
}
.achievements__list li {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem;
    padding-left: 20px;
    position: relative;
}
.achievements__list li::before {
    content: "▹";
    position: absolute;
    left: 0;
    color: var(--green);
    font-size: var(--fz-sm);
    line-height: 12px;
    top: 2px;
}
.achievements__issuer {
    font-family: var(--font-mono);
    font-size: var(--fz-xxs);
    margin-bottom: 0.2rem;
}
.achievements__name {
    font-family: var(--font-mono);
    font-size: var(--fz-xs);
    color: var(--light-slate);
}
.sidebar__exp :hover{
    background-color: var(--light-navy);
}
.details{
    margin: 1rem;
    padding: 1rem;
}
.title__details{
    font-size: 1rem;
    margin: 0.5rem 0;
}
.time__details{
    font-size: 0.9rem;
    margin: 1rem 0;
    font-family: var(--font-mono);
}
.experience__detials{
    list-style: none;
}
.experience__detials li{
    position: relative;
    margin-bottom: 10px;
    padding-left: 20px;
    font-family: var(--font-mono);
    font-size: var(--fz-md);

}
.experience__detials li::before {
    content: "▹";
    position: absolute;
    padding: 2px ;
    left: 0px;
    color : var(--green);
    font-size: var(--fz-lg);
    line-height: 12px;
}
.project__description{
    background-color:var(--light-navy);
    transition: var(--transition);
    border-radius:  var(--border-radius);
    padding: 1.4rem;
    box-shadow:  0 10px 30px -15px var(--navy-shadow);
    z-index: 2;
    /* position: relative; */
    top: 10%;
    left: -2%;
    width: 45vw;
    cursor: pointer;
}
.project__description:hover{
    box-shadow:  0 10px 30px -15px var(--navy-shadow);
}
.featured__project {
    font-family: var(--font-mono);
    color: var(--green);
    padding: 1rem;
}
.project__name {
    font-family: var(--font-sans);
    color: var(--slate);
    font-size: var(--fz-md);
    padding: 0.5rem 1rem;
}
.list__stack{
    list-style: none;
    display: flex;
    padding: 1rem;
    gap: 1rem;
    /* justify-content: space-around; */
    flex-wrap: wrap;
    /* max-width: 30vw; */
    font-family: var(--font-mono);
}
.project__img{
    width: 100%;
    max-width: 340px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}
 a, a:hover, a:focus, a:active {
      text-decoration: none;
      color: inherit;
 }
.footer__mention{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--slate);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    padding: 1rem;
    cursor: pointer;
}
.footer__mention :hover{
    color: var(--green);
    cursor: pointer;
}
.footer__anchor {
    text-decoration: none;
}
.position__project{
    position: relative;
    left: 17%;
}
.contact_header{
    text-align: center;
}
.contact__heading{
    font-size: clamp(24px,3vw,var(--fz-xl));
    font-family: var(--font-mono);
    color: var(--lightest-slate);
    line-height: 1.1;
}

.say__hello{
    width: max-content;
    color: var(--slate);
    font-family: var(--font-mono);
    border : 1px solid var(--green);
    padding: 0.75rem 1rem;
    border-radius: var(--border-radius);
    margin: 0 auto;
}
.say__hello:hover{
    background-color: var(--green-tint);
}
.blink{
}
.blink::after{
    content: "|";
    display: inline-block;
    animation: blink 1s ease-in-out infinite;
}
@keyframes blink{
    0%{opacity: 0;}
    100%{opacity: 1;}
}
.mobile__footer{
    display: none;
    /* padding: 0 20rem; */
    list-style: none;
    justify-content: space-evenly;
}


    .sidebar__mobile{
        display: none;
    }
    .sidebar__menu{
        display: none;

    }
    .second__project{
        display: flex; 
        flex-direction: row-reverse;
    }





@media screen and (max-width : 960px) {
    .navbar{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        /* grid-template-rows: 4rem; */
    }
    .menu{
        display: flex;
        flex-direction: column;
    }
    .menu__icon{
        display: inline-block;
        position: relative;
        width: var(--hamburger-width);
        color: var(--green);
        height: 24px;
    }
    .menu__icon__inner::before {
    content: "";
    display: block;
    position: absolute;
    top : -10px;
    left: auto;
    right: 0px;
    width: 120%;
    height: 2px;
    border-radius: 4px;
    background-color: var(--green);
    transition-timing-function: ease;
    transition-duration: 0.15s;
    transition-property: transform;
    }    
    .menu__icon__inner {
        position: absolute;
        top: 50%;
        right: 0px;
        width: var(--hamburger-width);
        height: 2px;
        border-radius: var(--border-radius);
        background-color: var(--green);
        transition: transform 0.22s cubic-bezier(0.55, 0.055, 0.675, 0.19) 0s;
        transform: rotate(0deg);
    }
    .menu__icon__inner::after {
    content: "";
    display: block;
    position: absolute;
    top : 10px;
    left: auto;
    right: 0px;
    width: 80%;
    height: 2px;
    border-radius: 4px;
    background-color: var(--green);
    transition-timing-function: ease;
    transition-duration: 0.15s;
    transition-property: transform;
        
    }
    .display__none {
        display: none;
    }
    .styled__list{
        display: none;
    }
    .right {
        display: none;
    }
    .hero__section{
        width: 100%;
    }
    .mobile__footer{
        display: flex;
        /* padding: 0 20rem; */
        list-style: none;
        justify-content: space-evenly;
    }
    .close-btn{
        color: var(--green);
        position: absolute; 
        top: 1rem; 
        right: 3rem; 
        font-size: 2rem;
        transition: var(--transition);
    }
    .sidebar__mobile{
        position: absolute;
        width: min(75vw, 400px);
        top : 0;
        bottom: 0;
        right: 0;
        height: 100vh;
        max-width: 100vw;
        overflow-x: hidden;
        z-index: 100;
        background-color: var(--light-navy);
        display: none;
        justify-content: center;
        align-items: center;
        -webkit-animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	    animation: slide-left 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    .sidebar__menu{
        display: none;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        list-style: none;
        text-align: center;

    }
    .sidebar__menu li {
        font-family: var(--font-mono);
        font-size: var(--fz-xxl);
        color: var(--slate);
        margin: 1rem 0;
        padding: 1.2rem;
        text-align: start;
    }
@keyframes slide-right {
    0% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
  100% {
    -webkit-transform: translateX(75vw);
            transform: translateX(75vw);
  }
}
@keyframes slide-left {
  0% {
    -webkit-transform: translateX(25vw);
            transform: translateX(25vw);
  }
  100% {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}

    .sidebar__numbering{
        color: var(--green);
    }
    .project__description{
        top: 0;
        right : 0;
        width :100%;
    }
    .list__stack{
        display: flex;
        max-width: 100vw;

    }
    .position__project{
    position: relative;
    left: 0;
}

    
    }
    @media (max-width : 520px) {
        .sidebar__exp{
            display: flex;
        }
        .active {
            border-top: solid 3px var(--green);
            border-left: none;
        }
        .details {
            padding: 0 1rem;
            margin: 0;
        }
        .about__me{
            gap: 0.5rem;
        flex-direction: column;
        }
        .about__img{
            width: 80vw;
            aspect-ratio: 1/1;
            margin: 2rem 0;
        }
        .footer__mention{
            font-size: 11px;
        }
        .slider {
            display: none;
        }
        .list__stack{ 
            gap : 0.5rem
        }

    }