html {
            scroll-behavior: smooth; 
            }

        body{
            margin: 0;
            padding: 0;
        }

        .header{
            display: flex;
            position: sticky;
            top: 0;
            z-index: 1000;
            justify-content: space-around;
            align-items: center;
            border-bottom: 2px solid #2b2c2c;
            padding: 3px 0;
            background: #0B0B11;
        }

        .logo{
            text-decoration: none;
        }

        .logo a{
            text-decoration: none;
            background: linear-gradient(270deg, #00FF99, #7B2FFF, #00FF88);
            background-clip: text;
            -webkit-text-fill-color: transparent;

        }
        .menu{
            display: flex;
            gap: 20px;
            list-style: none;
        }
        .menu a:hover{
            color: #00FF99;
        }

        .btn{
            padding: 15px 20px;
            border: none;
            background: #00FF99;
            font-size: 1rem;

            clip-path: polygon(
                15px 0%, 
                100% 0%, 
                calc(100% - 15px) 100%, 
                0% 100%
            );
            
        }
        .header ul  a{
            text-decoration: none;
            color: rgb(126, 126, 126);
            font-weight: bold;
        }

        .btn a{
            text-decoration: none;
            color: #050510;
            font-weight: bolder;
        }

        .hero{
            display: flex;
            justify-content: space-around;
            align-items: center;
            overflow: hidden;
            margin-top: 0;
            background-color: #0B0B11;
            padding-bottom: 50px;
        }

        
        .hero h1{
            display: flex;
            flex-direction: column;
            gap: 10px;
            font-family: 'Bebas Neue', sans-serif;
            font-size: clamp(3rem, 8vw, 10rem);
            line-height: 0.9; 
            margin-bottom: 0; 
        }

        .heading{
            margin-top: 30px;
        }
        .heading-1{
            color: white;
        }

        .heading-2{
            -webkit-text-stroke: 2px #00ff99;
            color: transparent;
        }

        .heading-3{
            color: white;
        }

        .slogan{
            font-size: 2rem;
            color: rgb(255, 255, 255);
        }
        .typing {
            border-right: 2px solid black;
            white-space: nowrap;
            overflow: hidden;
            color: #00ff99;
        }

        .hero p, .tools p, .edu-sec p, .hire-section p, .project-div>p, .cv-dwnld p{
            color: #7B7B9B;
            font-size: 1.2rem;
            max-width: 600px;
            line-height: 1.5;
        }

        .hero-button{
            display: flex;
            gap: 10px;          
        }

        .hero-button button{
            flex: 1;
            padding: 15px;
            border-radius: 10px;
            letter-spacing: 0.5px;
            transition: transform 0.2s, opacity 0.2s;
            font-family: var(--font-mono);
            cursor: pointer;
            font-size: 1.2rem;
            max-width: 200px;
        }
        
        .hire-me a{
            text-decoration: none;
            color: black;
        }

        .hire-me{
            background: #00FF99;
            border: none;
            display: flex;
            gap: 10px;
            justify-content: center;
        }

        .dwnld-cv{
            background: transparent;
            color: white;
            border: 2px solid rgb(88, 88, 88);
        }

        .dwnld-cv a{
            text-decoration: none;
            color: white;
        }
        .hero img{
            height: 50vh;
            border-radius: 50%;
            border: 2px solid #00FF99;
        }

/* ====================================================== */


        .slider{       
            overflow: hidden;
            width: 100%;
        }

        .slider-track-wrapper{
            overflow: hidden;
            position: relative;
        }
        .slider-track{
            display: flex;
            width: max-content;
            background-color: #0C0D11;
            border-top: 1px solid rgb(116, 116, 116);
            border-bottom: 1px solid rgb(116, 116, 116);
            gap: 50px;
            padding: 35px;
            animation: slide-left 22s linear infinite;
        }

        .slide-item{
            display: flex;
            color: white;
            font-size: 1.5rem;
            gap: 15px;
            background: #1B1B26;
            padding: 15px 30px;
            border-radius: 100px;
        }

        .slide-item i {
            color: #00FF99;
        }

        @keyframes slide-left {
            from{
                transform: translateX(0);
            }
            to{
                transform: translateX(-50%);
            }
        }


        /* =============================== */

        .tools-section{
            background-color: #15151B;
        }
        .tools{
            display: flex;
            flex-direction: column;
            margin: 0 auto;
            max-width: 75%;
            background-color: #15151B;
            padding-top: 50px;
        }

        
        .section-label{
            color: white;
            font-size: 3rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

        }

        .section-label span{
            color: #00FF99;
        }

        .skill-div{
            display: flex;
            gap: 30px;
            margin-top: 30px;
            margin-bottom: 50px;
        }

        .reveal>h1{
            font-family: Arial, Helvetica, sans-serif;
        }

        .reveal{
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.3s ease;
        }

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

        .skill-div div{
            flex: 1;
            background: #1C1C27;
            border-radius: 10px;
        }

        .skill-div>div> h1, .skills{
            padding: 10px 20px;
        }


        .skill-div h1{
            display: flex;
            color: #00FF99;
            gap: 10px;
            font-size: 1rem;
        }

        .skills{
            display: flex;
            flex-wrap: wrap;
            gap: 5px;
        }

        .skills span{
            color: white;
            background: #19282f;
            font-size: .8rem;
            letter-spacing: 1px;
            padding: 10px;
            border: 1px solid #215a58;
            border-radius: 5px;
            transition: .3s ease;
        }

        .skills span:hover{
            background-color: #314e5c;
            color: #00ff88;
        }

        /* ========================= */

        .edu-sec{
            padding-top: 30px;
            background-color: #0A0B0F;
        }

        .edu-sec>div{
            display: flex;
            flex-direction: column;
            max-width: 75%;
            margin: 0 auto;
            padding-bottom: 50px;
        }
        
        .ac-jr{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: #02F5A0;
            font-size: 1.3rem;
            margin-bottom: -20px;
        }

        .ac-jr::before{
            content: '';
            width: 24px;
            height: 1px;
            background: #00FF88;
        }

        .edu-sec>div>h1{
            margin-bottom: -5px;
        }
        .edu-sec>div>div{
            display: flex;
            flex-direction: column;
            gap: 30px;
            margin-top: 30px;
        }
        .edu-div{
            background-color: #1C1C27;
            padding: 10px 30px;
            border: 1px solid rgb(59, 59, 59);
            border-radius: 10px;
        }

        .edu-div:hover{
            border: 1px solid #00FF88;
            transition: all .3s ease;
        }
        
        .duration{
            color: #00FF88;
            font-size: 1rem;
        }

        .subject{
            color: white;
            font-size: 1.5rem;
        }

        .institute{
            color: #7B7B9A;
            font-size: 1.2rem;
        }

        /*============================= */

        .project{
            display: flex;
            justify-content: center;
            background-color: #15151B;
        }

        .project-div{
            width: 75%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .project-demo{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 30px;
            margin-top: 50px;
        }

        .project-card{
            flex-wrap: wrap;
            background-color: #1C1C28;
            border-radius: 15px;
            position: relative;
            overflow: hidden;
        }


        .project-card::after{
            content:  '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 0%; 
            height: 3px;
            background: linear-gradient(90deg, #00FF88, #09C8EF);
            transition: width 0.4s ease;
        }

        .project-card:hover::after{
            width: 100%; 
        }


        .project-card h2{
            color: #00FF88;
            font-size: 0.8rem;
            letter-spacing: 1.5px;
        }

        .project-card h1{
            color: white;
            font-size: 1.3rem;
            letter-spacing: 1px;
        }

        .project-card p{
            color: #7B7B9A;
            font-size: 1rem;
        }

        .project-card>div{
            display: flex;
            flex-direction: column;
            gap: 10px;
            flex-wrap: wrap;

        }

        .project-card>div{
            padding: 20px;
        }

        .project-span{
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
        }
        .project-span span{
            
            color: #09C8EF;
            background-color: #192835;
            padding: 8px 10px;
            border-radius: 8px;
            border: 1px solid #09C8EF;
        }

        /* ====================================== */
        .hire-section{
            background-color: #0A0B0F;
        }

        .hire-section>div{
            width: 90%;
            display: flex;
            justify-content: space-evenly;
            margin: 0 auto;
            align-items: center;
            padding-top: 50px;
        }

        .service{
            list-style: none;
            color: white;
            line-height: 2;
        }

        .service li{
            display: flex;
            gap: 15px;
            font-size: 1rem;
            align-items: center;
        }

        .fiverr-div{
            display: flex;
            justify-content: center;
            background-color: #1C1C28;
            max-width: 340px;
            height: 350px;
            border-radius: 20px;
        }
        .fiverr{
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .fiverr a{
            display: flex;
            gap: 20px;
            text-decoration: none;
            color: black;
        }

        .fiverr h1{
            font-size: 3rem;
            color: #01fa86;
            margin-bottom: -10px;
        }

        .fiverr h1 span{
            color: white;
        }

        .fiverr p{
            text-align: center;
        }

        .fiverr button{
            font-size: 1rem;
            padding: 15px 20px;
            border-radius: 10px;
            border: none;
            background: linear-gradient(135deg,#05f6aa, #04d9e9);
            transition: opacity 0.2s, transform 0.2s;
        }
        
        .fiverr button:hover{
            background: linear-gradient(135deg,#03c98a, #04c5d3);
            opacity: 0.88; 
            transform: translateY(-2px);
        }

        .availability-dot{
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.9rem;
            color: #00FF88;
            margin-top: 20px;
            margin-bottom: -100px;
        }

        .availability-dot::before{
            content: '';
            width: 10px;
            height: 10px;
            background-color: #00FF88;
            border-radius: 50%;
            animation: live 2s infinite;
        }

        @keyframes live {
            0%, 100%{
                opacity: 1;
                transform: scale(1);
            }
            50%{
                opacity: 0.4;
                transform: scale(0.8);
            }
        }


        /* ========================================= */

        .cv-section{
            background-color: #15151B;
            display: flex;
            justify-content: center;
        }

        .cv-section>div{
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 75%;
            padding-top: 50px;
            padding-bottom: 50px;
        }

        .cv-btn{
            display: flex;
            flex-direction: column;
            gap: 20px;
        }

        .cv-btn a{
            text-decoration: none;
            display: flex;
            gap: 20px;
        }

        .dwnld{
            font-size: 1rem;
            padding: 15px 20px;
            border-radius: 10px;
            border: none;
            color: #050510;
            background: linear-gradient(to right, #05DE94, #05DF95);
            transition: opacity 0.2s, transform 0.2s;
        }

        .dwnld:hover{
            opacity: 0.88; 
            transform: translateY(-2px);
        }

        .dwnld a{
            color: #050510;
        }

        .open{
            font-size: 1rem;
            padding: 15px 20px;
            border-radius: 10px;
            border: 1px solid white;
            color: white;
            background: transparent;
            margin-bottom: -10px;
            transition: opacity 0.2s, transform 0.2s;
        }

        .open:hover{
            opacity: 0.88; 
            transform: translateY(-2px);
            border: 2px solid #00FF88;
        }

        .open a{
            color: white;
        }

        .cv-btn p{
            color: #7B7B9A;
            font-size: 1rem;
        }

        /* ========================================== */

        .contact-section{
            background-color: #0C0B11;
            display: flex;
            justify-content: center;
            padding-bottom: 50px;
        }

        .contact-section>div{
            display: flex;
            align-items: center;
            justify-content: space-evenly;
            padding-top: 50px;
            width: 75%;
        }

        
        .contact-p{
            color: #7B7B9B;
            font-size: 1.1rem;
        }

        .contact-card{
            border: 1px solid transparent;
        }

        .contact-card>div{
            display: flex;
            align-items: center;
            gap: 20px;
            background-color: #1C1C28;
            border-radius: 15px;
            padding: 5px 15px;
        }

        .contact-card i{
            color: #02F4A0;
            font-size: 2rem;
        }

        .card-info{
            display: flex;
            flex-direction: column;
        }

        .card-info h1{
            color: white;
            font-size: 1.2rem;
        }

        .card-info h2{
            color: #7B7B9A;
            font-size: 1rem;
            margin-bottom: -10px;
        }

        .c-c{
            display: flex;
            flex-direction: column;
            gap: 30px;
        }

        .contact-card>div{
            padding: 10px 30px ;
        }

        .contact-card:hover{
            border: 1px solid #00FF88;
            border-radius: 15px;
        }

        .social{
            display: flex;
            justify-content: center;
            gap: 30px;
            padding-top: 30px;
        }

        .social a{
            color: #7f7fc1;
            font-size: 2rem;
        }

        .social a:hover{
            color: #00FF88;
        }

       .footer{
            display: flex;
            justify-content: center;
            align-items: center;
            justify-content: center;
            background-color: #0A0B0F;
            padding: 20px 0;
            border-top: 1px solid #1C1C27;
            width: 100%;
            text-align: center;
        }

        .copyright{
            color: #7B7B9A;
            font-size: 0.9rem;
            letter-spacing: 0.5px;
            transition: 0.3s ease;
        }

        /* hover effect */
        .copyright:hover{
            color: #00FF88;
        }
/* ============================ */
/* LARGE DEVICES / LAPTOP (1024px - 1440px) */

@media (max-width: 1440px){

    .header{
        padding: 12px 40px;
    }

    .hero{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 40px;
        padding: 50px 40px;
    }

    .hero h1{
        font-size: clamp(4rem, 7vw, 8rem);
        gap: 5px;
    }

    .hero img{
        height: 40vh;
    }

    .tools,
    .edu-sec > div,
    .project-div,
    .cv-section > div,
    .contact-section > div{
        width: 85%;
        max-width: 85%;
    }

    .project-demo{
        grid-template-columns: repeat(3, 1fr);
    }
}



/* TABLET DEVICES (768px - 1024px) */
@media (max-width: 1024px){

    html, body {
        overflow-x: hidden;
    }
    .header{
        padding: 12px 20px;
    }

    .menu{
        gap: 15px;
    }

    /* HERO */
    .hero{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-items: center;
        gap: 40px;
        padding: 50px 30px;
        text-align: left;
    }

    .hero > div{
        width: 100%;
    }

    .hero h1{
        font-size: clamp(3.2rem, 7vw, 5rem);
        gap: 4px;
    }

    .heading{
        margin-top: 10px;
    }

    .hero img{
        height: 38vh;
        display: block;
        margin: 0 auto;
    }

    .slogan{
        font-size: 1.4rem;
    }

    .hero-button{
        justify-content: flex-start;
    }

    /* COMMON WIDTH */
    .tools,
    .edu-sec > div,
    .project-div,
    .cv-section > div,
    .contact-section > div{
        width: 90%;
        max-width: 90%;
    }

    /* SKILLS */
    .skill-div{
         display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .skill-div > div:last-child{
        grid-column: 1 / 3;
        width: 48%;
        justify-self: center;
    }

    .skills{
        padding-bottom: 20px;
    }

    .subject{
        font-size: 1.2rem;
    }

    .institute{
        font-size: 1rem;
    }
    /* PROJECT */
    .project-demo{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 25px;
    }

    .project-demo > div:last-child{
        grid-column: 1 / 3;
        width: 48%;
        justify-self: center;
    }
    /* HIRE */
    .hire-section > div{
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }

    .service{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 15px 30px;
        justify-content: center;
    }

    .service li{
        justify-content: flex-start;
    }

    .hire-section > div{
        align-items: center;
        text-align: left;
        padding-bottom: 20px;
    }
    /* CV */
    .cv-section > div{
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    /* CONTACT */
    .contact-section > div{
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: start;
        text-align: left;
    }

    
}

/* MOBILE DEVICES (0px - 768px) */


@media (max-width: 768px) {

    html, body {
        overflow-x: hidden;
    }

   .menu , .btn{
    display: none;
   }

   .header{
    display: flex;
    justify-content: center;
   }

   .hero{
    display: flex;
    flex-direction: column;
    margin-top: -30px;
   }

   .heading{
    display: flex;
    text-align: center;
   }

   .heading-2{
        -webkit-text-stroke: .1px #00ff99;
        color: transparent;
    }

    .heading-3{
        color: white;
        font-weight: 200;
    }

    .slogan{
        font-size: 1.1rem;
        text-align: center;
    }

    .hero-p{
        text-align: justify;
    }

    .slider-track{
        padding: 20px;
    }

    .slide-item{
        font-size: 1.2rem;
    }

    .section-label{
        font-size: 2rem;
    }

    .subject{
        font-size: 1rem;
    }
    .institute{
        font-size: 0.9rem;
    }

    .skill-div{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .skill-div > div {
        width: 100% !important;
        max-width: 450px !important;
        min-width: 350px;  
    }

    .service li{
        font-size: 1rem;
    }
    .project-demo{
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .project-card{
        width: 100% !important;
    }


    .contact-section{
        width: 100%;
    }
    .contact-section>div{
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .c-c{
        margin-top: -30px;
    }

}