/*----------------------------------------------------- css for font  ---------------------------------------------------------*/

@import url('https://fonts.googleapis.com/css2?family=Gloock&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@font-face {
    font-family: 'Neue Montreal';
    src: url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc2ac94387f0283a2bc34_PPNeueMontreal-Thin.woff') format('woff'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc23576d96805fd7a0e99_PPNeueMontreal-Thin.ttf') format('truetype'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc1e0ee1305479ccd0d62_PPNeueMontreal-Thin.otf') format('opentype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}
  @font-face {
    font-family: 'Neue Montreal';
    src: url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc289fb60fe07aa70d8b1_PPNeueMontreal-Light.woff') format('woff'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc213ed19b6d75de2bf38_PPNeueMontreal-Light.ttf') format('truetype'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc1967f779fbd67f4178f_PPNeueMontreal-Light.otf') format('opentype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
  @font-face {
    font-family: 'Neue Montreal';
    src: url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc2823fa51a83d8682f5b_PPNeueMontreal-Book.woff') format('woff'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc208bae237dd655166ee_PPNeueMontreal-Book.ttf') format('truetype'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc14163629a01b6cc7679_PPNeueMontreal-Book.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
  @font-face {
    font-family: 'Neue Montreal';
    src: url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc29d04a5c2f38d17b0eb_PPNeueMontreal-Regular.woff') format('woff'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc22898891ec20aec62c1_PPNeueMontreal-Regular.ttf') format('truetype'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc1c312fe42cc2870460c_PPNeueMontreal-Regular.otf') format('opentype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
  @font-face {
    font-family: 'Neue Montreal';
    src: url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc29276d96805fd7a9242_PPNeueMontreal-Medium.woff') format('woff'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc21a9fef83bbff9ae727_PPNeueMontreal-Medium.ttf') format('truetype'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc1b1ed19b6d75de21c19_PPNeueMontreal-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
  @font-face {
    font-family: 'Neue Montreal';
    src: url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc2a7ee1305479cce1a73_PPNeueMontreal-SemiBold.woff') format('woff'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc22e03cfbf571b59327b_PPNeueMontreal-SemiBold.ttf') format('truetype'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc1d5a8ed824bd7a69d2a_PPNeueMontreal-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
  @font-face {
    font-family: 'Neue Montreal';
    src: url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc2788d931c5230e65633_PPNeueMontreal-Bold.woff') format('woff'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc1f694387f0283a1ebff_PPNeueMontreal-Bold.ttf') format('truetype'), url('https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/649dc0cb292d632da45fc396_PPNeueMontreal-Bold.otf') format('opentype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


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

a{
    text-decoration: none;
    color: var(--on-background);
}

body{
    background-color: var(--background);
    color: var(--on-background);
    width: 100%;
    height: 200vh;
    padding-bottom: 40px;
}

.main{
    z-index: 1;
    background-image: radial-gradient(circle closest-corner at 50% 0, #f2f2f226, #0000);
    flex-direction: column;
    justify-content: start;
    padding-bottom: 4px;
    display: flex;
    position: relative;
    overflow: hidden;
    height: 100vh;
    padding-left: 40px;
    padding-right: 40px;
}

:root {
    --background: #101010;
    --on-background: #f2f2f2;
}

.hero-bg-gradient {
    z-index: 2;
    background-image: linear-gradient(to right, transparent 5%, var(--on-background) 50%, transparent 95%);
    opacity: .7;
    filter: blur(100px);
    border-radius: 2000px;
    height: 50%;
    display: none;
    position: absolute;
    inset: 96px 24px auto;
}

.hero-noise {
    z-index: -2;
    opacity: .2;
    mix-blend-mode: overlay;
    background-image: url(https://cdn.prod.website-files.com/63dcb6e1a80e9454b630f4c4/644af0299bc01254815ae442_noise-overlay-2.png);
    background-position: 0 0;
    background-size: 200px;
    display: block;
    position: absolute;
    inset: 0%;
}

/*----------------------------------------------------- css for nav  ---------------------------------------------------------*/

.nav{
    width: 100%;
    font-family: Neue Montreal;
    position: fixed; 
    top: 0;
    left: 0;
    padding: 10px 20px;
    z-index: 10000; 
}

.nav .nav-left{
    position: absolute;
    top: 30px;
    left: 50px;
    z-index: 10000;
}

.nav .nav-left h3{
    font-weight: 500;
    font-size: 20px;
    line-height: 30px;
}

.nav .nav-left p{
    font-weight: 400;
    font-size: 13px;
    color: #f2f2f280
}

.nav .nav-middle{
    z-index: 10000;
    background-color: #f2f2f20d;
    border: 1px solid #f2f2f21a;
    border-radius: 24px;
    width: 180px;
    height: 48px;
    padding-left: 6px;
    padding-right: 6px;
    transition: box-shadow 1s cubic-bezier(.23, 1, .32, 1), border .6s cubic-bezier(.165, .84, .44, 1);
    box-shadow: 0 10px 25px #00000026;
    font-size: 14px;

    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%); 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    backdrop-filter: blur(15px);

}

.nav .nav-middle:hover{
    border: 1px solid #f2f2f246;
    background-color: #f2f2f213;

}

.nav-middle .work, .nav-middle .info{
    padding: 10px 18px;
    border-radius: 50px;
    width: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .6s ease;

}


.nav-toggle{
    padding: 18px 18px;
    border-radius: 50px;
    width: 78px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    background-color: #f2f2f20d;
    transition: all .6s ease;
    cursor: pointer;
    will-change: all;
    right: 93px;
}

.nav-toggle .handle{
    width: 20px;
    height: 2px;
    background-color: var(--on-background);
    position: absolute;
    top: -8px;
    border-top-right-radius: 10px;
    border-top-left-radius: 10px;
}

.nav-right{

    position: absolute;
    top: 40px;
    right: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    z-index: 10000;
}

.nav-right .linkedin, .nav-right .resume{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    font-size: 15px;
    color: #f2f2f2;
    letter-spacing: .2px;
    font-family: Neue Montreal, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
    text-decoration: none;
}

.at-the-rate{
    width: 48px;
    height: 48px;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    position: relative;
    box-shadow: inset 0 0 10px #0000001a, 0 4px 16px #00000040;
    display: none;
    border-radius: 50%;
    transition: all .3s;
}

.at-the-rate #icon{
    font-size: 22px;
    transition: all .3s;
}

/*----------------------------------------------------- css for responsive nav  ---------------------------------------------------------*/


@media (max-width: 900px) {
    .nav-right{
        display: none;
    }

    .nav .nav-left{
        position: absolute;
        top: 30px;
        left: 40px;
    }

    .at-the-rate{
        display: block;
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        top: 30px;
        right: 40px;
    }

    .nav .nav-middle{
        background-color: #f2f2f20d;
        border: 1px solid #f2f2f21a;
        border-radius: 24px;
        width: 180px;
        height: 48px;
        padding-left: 6px;
        padding-right: 6px;
        transition: box-shadow 1s cubic-bezier(.23, 1, .32, 1), border .6s cubic-bezier(.165, .84, .44, 1);
        box-shadow: 0 10px 25px #00000026;
        font-size: 14px;
        position: absolute;
        left:auto;
        right: 30px;
        top: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        backdrop-filter: blur(15px);
    }

}

@media (max-width: 520px) {
    .nav-left{
        display: none;
    }
    .nav .nav-middle{
        position: absolute;
        left: 110px;
        right: auto;
        top: 30px;
    }
    .at-the-rate{
        right: 20px;
    }
}


.drawer{

    position: absolute;
    left: 0;
    top: 0;
    display: none;
    scale: 0;
    width: 160px;
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(20px);
    /* background-color: #f2f2f20d; */
    border: 1px solid #f2f2f21a;
    border-radius: 16px;
    padding: 30px 20px;
    inset: 88px 24px auto auto;
    overflow: hidden;
    box-shadow: 0 10px 30px #0000004d;  
    background-color: rgba(56, 56, 56, 0.89);
    margin-right: -20px;
    margin-top: -30px;
    gap: 10px;
    transition: all .3s;

}

.drawer .drawer-linkdin, .drawer .drawer-resume{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/*----------------------------------------------------- css for mac section  ---------------------------------------------------------*/




.mac-section{
    width: 100%;
    height: 65vw;
    display: flex;
    align-items: start;
    justify-content: center;
}

.outer-line{
    margin-top: 140px;
    width: 1080px;
    height: 700px;

    backdrop-filter: none;
    outline-offset: -1px;
    border-radius: 24px;
    outline: 1px solid #f2f2f226;
    padding: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 8px #0006, 0 0 60px #0003, 0 30px 120px #000c;
    padding: 8px;
}

.inner-line{
    width: 100%;
    height: 100%;
    border-radius: 16px;

    backdrop-filter: blur(20px);
    border: 1px solid #f2f2f24d;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 10px #0000001a, 0 0 12px #0006;

    display: flex;
    flex-direction: column;

}

.tool-bar{
    width: 100%;
    height: 8%;
    backdrop-filter: blur(40px);
    display: flex;
    justify-content: space-between;
    background-image: linear-gradient(to right, #f2f2f21a, #f2f2f280 50%, #f2f2f21a);
}

.rgb-icons{
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.plus-icon{
    width: 6%;
    height: 100%;
}

.dot{
    border-radius: 50%;
    width: 1vw;
    height: 1vw;
    
}

.dot1{
    background-color: #f46b5d;    
    box-shadow: 0 0 20px 2px #f46b5d;}
.dot2{
    background-color: #f9bd4e;    
    box-shadow: 0 0 20px 2px #f9bd4e;}
.dot3{
    background-color: #57c353;
    box-shadow: 0 0 20px 2px #57c353;
}

.plus-icon{
    display: flex;
    justify-content: center;
    align-items: center;
}

.plus-icon i{
    font-size: 2vw;
    color: rgb(121, 121, 121);
}


.screen{
    width: 100%;
    height: 92%;

    z-index: 0;
    mix-blend-mode: overlay;
    background-image: url(https://cdn.prod.website-files.com/63dcb6e…/644af02…_noise-overlay-2.png);
    background-position: 0 0;
    background-size: 200px;
    position: absolute;
    inset: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.fade{
    height: 200px;
    width: 100%;
    position: absolute;
    left: 0;
    top: 660px;
    background-image: linear-gradient(to bottom, #10101000, var(--background) 60%);
    z-index: 5;

}

.screen-info{
    width: 88%;
    height: 60%;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

.screen-heading{
    width: 100%;
    height: 50%;

    text-align: left;
    letter-spacing: -2px;
    text-shadow: 0 5px 10px #0057ff26, 0 -5px 10px #ff5a001a, 0 -5px 25px #ffffff4d;
    font-family: Neue Montreal, sans-serif;
    font-size: 96px;
    font-weight: 500;
    line-height: 90%;
    color: var(--on-background);
    opacity: 1;
}

.text-hero-serif{
    -webkit-text-size-adjust: 100%;
    --background: #101010;
    --on-background: #f2f2f2;
    color: var(--on-background);
    pointer-events: all;
    text-align: left;
    font-size: 96px;
    line-height: 90%;
    box-sizing: border-box;
    background-image: linear-gradient(to bottom, var(--on-background) 50%, transparent 90%);
    letter-spacing: -2px;
    text-shadow: 0 5px 15px #0057ff1a, 0 -5px 15px #ff5a0014, 0 0 30px #fff3;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    padding-right: 12px;
    font-family: Gloock, sans-serif;
    font-style: italic;
    font-weight: 400;
}

.sub-heading{
    display: flex;
    justify-content: flex-end;
}

.screen-sub-heading{
    width: 53%;
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    
}

.sub1{
    font-family: Neue Montreal, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 140%;

}

.sub2{
    font-family: Neue Montreal, sans-serif;
    color: #f2f2f280;
    font-weight: 400;
    font-size: 26px;
    line-height: 140%;
}

.project-section{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 60px;
    padding: 40px;
}

.project-outer{
    width: 1080px;
    height: 700px;
    backdrop-filter: none;
    outline-offset: -1px;
    border-radius: 24px;
    outline: 1px solid #f2f2f226;
    padding: 8px;
    overflow: hidden;
    box-shadow: inset 0 0 8px #0006, 0 0 60px #0003, 0 30px 120px #000c;
    z-index: 0;
}

.project-inner{
    width: 100%;
    height: 100%;
    border-radius: 16px;

    backdrop-filter: blur(20px);
    border: 1px solid #f2f2f24d;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: inset 0 0 10px #0000001a, 0 0 12px #0006;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 24px 0 0 0;
    z-index: 0;
    transition: all 6s ease;
}

.project-inner-heading {
    width: 92%;
    display: flex;
    flex-direction: column;
    gap: .8vw;
}

.project-inner-heading p{
    color: #f2f2f280;
    letter-spacing: .2px;
    align-self: stretch;
    padding-right: 32px;
    font-family: Neue Montreal, sans-serif;
    font-size: 1.4vw;
    font-weight: 400;
    line-height: 20px;
}

.project-inner h2{
    letter-spacing: 0;
    text-shadow: 0 -2px 10px #fff3;
    justify-content: space-between;
    font-family: Neue Montreal, sans-serif;
    font-size: 2.6vw;
    font-weight: 500;
    line-height: 100%;
}

.project-inner img{
    width: 85%;
    /* height: 80%; */
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    border: 1px solid #f2f2f24d;
}

.introduction{
    display: none;
}


@media (max-width: 1218px){
    .outer-line{
        width: 88vw;
        height: 61vw;
    }

    .screen-heading{
        font-size: 8vw;
    }
    .text-hero-serif{
        font-size: 8vw;
    }
    .sub1 , .sub2{
        font-size: 2.3vw;
    }

    .project-outer{
        width: 88vw;
        height: 61vw;
    }
}

@media (max-width: 983px){
    .fade{
        top: 570px;
    }
    /* .project-section{
        margin-top: -90px;
        z-index: 6;
    } */
    /* .project-outer, .project-inner{
        z-index: 6;
    } */
    /* .nav{
        z-index: 10000;
    } */
}



@media (max-width: 903px){
    .fade{
        top: 520px;
    }
    .project-section{
        margin-top: -90px;
        /* z-index: 6; */
    }
    .project-outer, .project-inner{
        /* z-index: 6; */
    }
    .nav{
        /* z-index: 10000; */
    }
}
@media (max-width: 800px){
    .fade{
        top: 460px;
    }
    .project-section{
        margin-top: -150px;
        /* z-index: 6; */
    }
    .project-outer, .project-inner{
        /* z-index: 6; */
    }
}
@media (max-width: 704px){
    .fade{
        top: 380px;
    }
    .project-section{
        margin-top: -240px;
        /* z-index: 6; */
    }
    .project-outer{
        height: 80vw;
    }
    .project-outer, .project-inner{
        /* z-index: 6; */
    }
    .project-inner-heading h2{
        font-size: 24px;
    }
    .project-inner-heading p{
        font-size: 12px;
        line-height: 14px;
    }
    .project-inner{
        justify-content: space-between;
        padding: 20px 0px 0px 0px;
    }
}
@media (max-width: 590px){
    .fade{
        top: 340px;
    }
    .project-section{
        margin-top: -270px;
        /* z-index: 6; */
    }
    .project-outer, .project-inner{
        /* z-index: 6; */
    }
    .project-outer{
        padding: 4px;
        border-radius: 15px;
        height: 80vw;
    }
    .project-inner{
        border-radius: 12px;
    }
    .project-inner img{
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;
        width: 90%;
    }
}

.white-dot{
    background-color: var(--on-background);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    box-shadow: 0 0 20px #fff;
}


@media (max-width: 520px){

    .project-section{
        margin-top: -200px;
    }

    .fade{
        display: none;
    }
    .mac-section{
        display: none;
    }
    .introduction{
        display: flex ;
        flex-direction: column;
        gap: 35px;
        width: 100%;
        margin-top: 160px;
        align-items: start;
        justify-content: start;
        font-family: Neue Montreal, sans-serif;
        /* background-color: blue; */
    }
    .introduction .name{
        display: flex;
        gap: 20px;
        align-items: center;
    }

    .introduction .name p{
        color: #f2f2f280;
        font-family: Neue Montreal, sans-serif;
        font-size: 3.5vw;
        font-weight: 400;
        display: block;
    }

    .main-heading{
        text-align: left;
        letter-spacing: -.25vw;
        font-size: 13vw;
        line-height: 12vw;
    }
    
    .main-heading .portrait{
        font-size: 13vw;
    }

    .screen-sub-heading{
        width: 100%;
    }

    .sub-mobile{
        width: 100%;
        font-size: 4.5vw;
    }
    .divider-line{
        margin-top: 50px;
        height: 1px;
        width: 100%;
        background-color: #f2f2f233;
    }
    
}

.visitor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0; /* Start with opacity 0 */
    visibility: hidden; /* Hide the element but keep it in the document flow */
    gap: 10px;
    border-radius: 50px;
    background-color: #47474745;
    padding: 8px;
    border: 1px solid #3636361a;
    box-shadow: 0 10px 25px #0000001b;
    transition: opacity 0.6s ease, visibility 0.6s ease; /* Transition for opacity and visibility */
    display: flex;
}

.visitor .github,
.visitor .deployed {
    display: inline-block; /* Makes them inline while keeping block properties */
    vertical-align: middle; /* Aligns them properly */
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background-color: rgb(85, 85, 85);
    transform: translateY(60%);
    transition: transform 0.6s ease;
    text-align: center;
    opacity: 0;
}

.project-inner:hover .visitor {
    opacity: 1; /* Fade in */
    visibility: visible; /* Make it visible */
}

.project-inner:hover .github{
    transition-delay: 0s;
}
.project-inner:hover .deployed{
    transition-delay: .15s;
}

.project-inner:hover .github,
.project-inner:hover .deployed {
    transform: translateY(0%); /* Move up */
    opacity: 1;
}

.visitor .github,
.visitor .deployed {
    display: flex;
    align-items: center;
    justify-content: center;
}

.visitor .github i,
.visitor .deployed i {
    font-size: 28px;
}

.visitor .deployed i {
    transform: rotate(-45deg);
}

.visitor .github:hover,
.visitor .deployed:hover {
    cursor: pointer;
}


.footer-line{
    margin-top: 100px;
    width: 1500px;
    height: 1px;
    width: 100%;
    background-color: #f2f2f233;
}

.footer{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 100px 0px;
    width: 75%;
    margin: auto;
}

.headings{
    display: grid;
    grid-template-columns: .7fr 1fr 1fr 1fr;
    gap: 20px;
    color: #f2f2f280;
    font-family: Neue Montreal;
    font-size: 14px;
}

.headings a{
    color: #f2f2f280;
}
.socials{
    display: grid;
    grid-template-columns: .7fr 1fr 1fr 1fr;
    row-gap: 20px;
    font-family: Neue Montreal;
    .h3{
        font-weight: 500;
        font-size: 17px;
    }
}

.socials .h3{
    display: flex;
    align-items: center;
}

.socials .h3:hover{
    cursor: pointer;
}

.copyright{
    margin-top: 60px;
}

.copyright h3{
    font-size: 17px;
    font-weight: 500;
    color: var(--on-background);
    font-family: Neue Montreal;
}
.copyright p{
    font-family: Neue Montreal;
    font-size: 15px;
    color: #f2f2f280;
    margin-top: 4px;
}

@media (max-width: 500px){
    .headings{
        font-size: 13px;
    }
    .socials .h3{
        font-size: 16px;
    }
    .copyright h3{
        font-size: 16px;
    }
    .copyright p{
        font-size: 14px;
    }
}

@media (max-width: 640px){
    .footer{
        width: 88%;
    }
}

@media (min-width: 1412px){
    .outer-line{
        width: 1180px;
        height: 700px;    
    }
    .project-outer{
        width: 1180px;
        height: 700px;
    }
    .fade{
        top: 700px;
    }
    .project-section{
        gap: 200px;
    }
    .project-inner{
        gap: 20px;
    }
}
@media (min-width: 1612px){
    .outer-line{
        width: 1480px;
        height: 900px;    
    }
    .project-outer{
        width: 1480px;
        height: 900px;
    }
    .fade{
        top: 900px;
    }
    .project-inner{
        gap: 20px;
    }
    .project-inner h2{
        font-size: 45px;
    }
    .project-inner-heading p{
        font-size: 24px;
    }
}



.in-progress {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: 'Neue Montreal', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.green-dot {
  width: 10px;
  height: 10px;
  background-color: #20c120; /* Bright green */
  border-radius: 50%;
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

@media (max-width: 800px) {
  .in-progress {
    font-size: 10px;
  }
  .green-dot {
    width: 6px;
    height: 6px;
  }
}