@font-face {
    font-family: Inter;
    src: url("/fonts/Inter/Inter-VariableFont_slnt,wght.ttf") format("truetype");
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: Roboto Mono;
    src: url('/fonts/RobotoMono/RobotoMono-VariableFont_wght.ttf');
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 90px; 
}

p,div{
    font-family: Poppins;
}
#loading{
    background-color: rgb(24, 24, 24);
    position: fixed;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    text-align: center;
    z-index: 99;
}


.fa-code{
    color: rgb(34, 211, 238);
    font-size: 50px;
    animation-name: loading-color;
    
}

@keyframes loading-color {
    0%   {color: rgb(250, 204, 21)}
    50%  {color: rgb(34, 211, 238)}
    100% {color: rgb(251, 113, 133)}
}

#cursor-outer, #cursor-inner{
    z-index: 999;
}



body{
    background-color: rgb(3, 3, 3);
    position: relative;
    padding: 16px;
    background-image: url('/src/img/bg.png');
    background-size: cover; 
    background-repeat: no-repeat;
}


p{
    margin: 0;
}

h1{
    margin-bottom: 0;
}

section{
    margin-bottom: 60px;
}

.banner-section{
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}

.banner-left{
    height: 500px;
    width: 45%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
}

.hello-text,.name-text{
    font-size: 65px;
    font-weight: 700;
}

.hello-div{
    height: 100px;
}

.hello-text{
    color: #235DF1;
    font-family: Roboto Mono;
}

.name-text{
    font-family: Poppins;
    color: white;
}

.banner-btns{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 8px;
}

.banner-btn,
.proj-card-vbtn,
.contact-form button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50px;
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 22px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.banner-btn-primary,
.proj-card-vbtn,
.contact-form button {
    background-color: #ffcf11;
    color: #000;
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(255, 207, 17, 0.3);
}

.banner-btn-primary:hover,
.proj-card-vbtn:hover,
.contact-form button:hover {
    background-color: #4ade80;
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(74, 222, 128, 0.35);
}

.banner-btn-secondary{
    background-color: transparent;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: none;
}

.banner-btn-secondary:hover{
    background-color: rgba(255, 255, 255, 0.08);
    border-color: #fff;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.1);
}

.about-section{
    max-width: 700px;
}

.descript-text{
    color: #C6C6C6;
    font-size:17px;
    font-weight: 500;
    width: 500px;
    text-align: right;
}

.banner-right{
    height: 500px;
    width: 45%;
    display: flex;
    justify-content: left;
    
}

.pcgif{
    width: 100%;
}

.glass-div{
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* About Section */

.about-title{
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    font-size: 35px;
    color: #FFFFFF;
    margin-bottom: 0;
}

.about-text{
    font-family: Roboto Mono;
    font-weight: medium;
    font-size: 16px;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.abt-txt-div{
    padding: 0px 70px 0px 70px;
    margin-top: 20px;
}


/* Skills Section */
.skills-title{
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    font-size: 35px;
    color: #FFFFFF;
    margin-bottom: 0;
}
.skills-content{
    margin-top: 8px;
}

.skill-category{
    margin-bottom: 28px;
}

.skill-category-title{
    font-family: Inter, sans-serif;
    font-weight: 600;
    font-size: 16px;
    color: #ffcf11;
    margin-bottom: 14px;
}

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

.skill-item{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.skill-item:hover{
    background: rgba(255, 207, 17, 0.08);
    border-color: rgba(255, 207, 17, 0.35);
    transform: translateY(-2px);
}

.skill-item i,
.skill-item .skill-icon{
    font-size: 22px;
    color: #22D3EE;
    min-width: 22px;
}

.skill-item .skill-icon{
    width: 18px;
    height: 18px;
    display: block;
    fill: currentColor;
    flex-shrink: 0;
}


.skill-item .fa-html5 { color: #E34F26; } /* HTML5 Orange */
.skill-item .fa-css3-alt { color: #1572B6; } /* CSS3 Blue */
.skill-item .fa-js-square { color: #F7DF1E; } /* JavaScript Yellow */
.skill-item .fa-react { color: #61DAFB; } /* React Cyan */
.skill-item .fa-node-js { color: #339933; } /* Node.js Green */
.skill-item .fa-php { color: #777BB4; } /* PHP Purple */
.skill-item .fa-python { color: #3776AB; } /* Python Blue */
.skill-item .fa-laravel { color: #FF2D20; } /* Laravel Red */
.skill-item .fa-bootstrap { color: #7952B3; } /* Bootstrap Purple */
.skill-item .fa-git-alt { color: #F05032; } /* Git Orange */
.skill-item .fa-github { color: #FFFFFF; } /* GitHub White */
.skill-item .fa-database { color: #336791; } /* Database Blue */
.skill-item .fa-arrow-right-arrow-left { color: #4CAF50; } /* REST APIs Green */
.skill-item .fa-cloud { color: #FF6C37; } /* Cloud Orange */
.skill-item .fa-code { color: #61DAFB; } /* Code/Next.js Cyan */
.skill-item .fa-cube { color: #0081CB; } /* Material UI Blue */
.skill-item .fa-wind { color: #06B6D4; } /* Tailwind CSS Cyan */
.skill-item .fa-spider { color: #FFA500; } /* Web Scraping Orange */
.skill-item .fa-wordpress { color: #21759B; } /* WordPress Blue */
.skill-item .fa-puzzle-piece { color: #92003B; } /* Elementor Pink */
.skill-item .fa-hammer { color: #40BA7B; } /* Beaver Builder Green */

/* VB.NET specific color */
.skill-item.vbnet-skill .fa-code { color: #5C2D91; } /* VB.NET Purple */
.skill-item.agentic-skill .skill-icon { color: #A78BFA; }
.skill-item.cursor-skill .skill-icon { color: #E4E4E7; }
.skill-item.claude-skill .skill-icon { color: #D97757; }
.skill-item.chatgpt-skill .skill-icon { color: #10A37F; }
.skill-item.gemini-skill .skill-icon { color: #8AB4F8; }
.skill-item.copilot-skill .skill-icon { color: #E4E4E7; }
.skill-item.postman-skill .skill-icon { color: #FF6C37; }
.skill-item.actions-skill .skill-icon { color: #2088FF; }
.skill-item.llm-skill .skill-ai-mark {
    color: #22D3EE;
    font-family: Inter, sans-serif;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.04em;
    line-height: 1;
    min-width: 22px;
    text-align: center;
}

.skill-item span{
    font-family: Poppins;
    font-weight: 500;
    font-size: 14px;
    color: #FFFFFF;
}
/* Start of Project */
.projects-title{
 
        font-family: Inter;
        font-style: normal;
        font-weight: bold;
        font-size: 35px;
        color: #FFFFFF;
        margin-bottom: 0;
}

.conediv{
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.cone{
    width:10%;
}


/* Start of Footer */
.footer{
    display: flex;
    justify-content: center;
    margin-top: 50px;
}

.madebyme{
    font-family: Inter;
    font-weight: bold;
    color:#FFFFFF;
    font-size: 15px;
}

.proj-card{
    background: rgba(24, 24, 24, 0.86);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: none;
    border-radius: 10px;
    color:white;
    position: relative;
    margin-top: -35px;
    transition: transform 0.3s ease-in-out;
}

.proj-single:hover  .proj-card{
    transform: translateY(20px);
}

.proj-card-img{
    width: 100%;
    max-height: 400px;
    overflow: hidden;
    object-fit: cover;
    object-position: top;
}

.proj-card:hover{
    background: rgb(16, 16, 16);
}

.proj-card-title{
    font-family: Inter;
    font-size: 28px;
    font-style: normal;
    font-weight: 700;
}

.proj-card-desc{
    font-size: 15px;
    min-height: 65px;
}

.proj-card-btns{
    margin-top: 10px;
    display: flex;
    align-items: center;
    text-align: center;
}

.proj-card-vbtn{
    margin-right: 15px;
}

.proj-card-btns .proj-github{
    font-size: 30px;
    color: #ffffff;
}

.proj-card-btns .proj-github-private{
    color: #888888;
    pointer-events: none;
}

.proj-card-pbtn{
    color: #888888;
    text-align: center;
    margin: 0px;
    gap: 8px;
    font-size:16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 35px;
    border: none;
    margin-right: 15px;
}

.tech-items{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    margin-bottom: 6px;
}

.tech-pill{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid rgba(2, 55, 86, 0.4);
    background: rgba(2, 55, 86, 0.5);
    color: #ececf1;
    font-family: Inter, Poppins, sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.2;
    white-space: nowrap;
    transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.tech-pill:hover{
    border-color: rgba(255, 207, 17, 0.55);
    background: rgba(255, 207, 17, 0.1);
    color: #fff;
}



@media only screen and (max-width: 1280px) {
    .hello-text,.name-text{
        font-size: 50px;
        text-align: right;
    }
    .hello-div{
        height: max-content;
    }

    .descript-text{
        font-size:15px;
        width: 330px;
    }
}


@media only screen and (max-width: 768px) {

    body{
        padding: 0;
    }

    .row > .col-md-6{
        padding: 0;
    }

    .hello-text,.name-text{
        font-size: 48px;
    }
    .hello-div{
        height: 70px;
    }
    
    .descript-text{
        font-size:14px;
        width: 230px;
    }


    .proj-card{
        margin-top: -30px;
        margin-left: 0px;
    }

    .proj-card-img{
        max-height: 250px;
    }

    /* Skills */
    .skills-content{
        padding: 0px 30px;
    }

    .skills-grid{
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 12px;
    }

    .skill-category-title{
        font-size: 18px;
    }

 
}

@media only screen and (max-width: 576px) {
    body{
        margin:25px;
        background-image: url('/src/img/bgmobile1.png');
        
    }

    .banner-section{
        display: flex;
        justify-content: space-between;
    }
    
    .banner-left{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .hello-text,.name-text{
        font-size: 55px;
        text-align: left;
    }
    .descript-text{
        font-size: 15px;
        text-align: left;
    }

    .banner-section{
        flex-direction: column;
    }

    .banner-left{
        height: 450px;
        width: 100%;
        align-items: start;
        margin-bottom: 0;
    }

    .banner-right{
        width: 100%;
        height: 200px;
        margin: 0px 0px 80px 0px;
        justify-content: center;
    }
    .glass-div{
        display: flex;
        align-items: center;

        
    }

    .banner-btns{
        justify-content: flex-start;
        width: 100%;
        gap: 10px;
    }

    .banner-btn,
    .proj-card-vbtn,
    .contact-form button {
        padding: 8px 20px;
        font-size: 14px;
    }

    .banner-btn{
        flex: 0 1 auto;
        min-width: unset;
    }

    .pcgif{
        width: 100%;
    }

    /* About */
    .abt-txt-div{
        padding: 0px;
    }

    /* Skills */
    .skills-content{
        padding: 0px;
    }

    .skills-grid{
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 10px;
    }

    .skill-item{
        padding: 10px 14px;
    }

    .skill-item i{
        font-size: 18px;
    }

    .skill-item .skill-icon{
        width: 16px;
        height: 16px;
        min-width: 16px;
    }

    .skill-item span{
        font-size: 12px;
    }

    .skill-item.llm-skill .skill-ai-mark{
        font-size: 12px;
        min-width: 18px;
    }

    .skill-category-title{
        font-size: 16px;
        margin-bottom: 15px;
    }

    .skill-category{
        margin-bottom: 30px;
    }
}

/* Contact Section */
.contact-section {
    margin-top: 60px;
    margin-bottom: 60px;
}

.contact-title {
    font-family: Inter;
    font-style: normal;
    font-weight: bold;
    font-size: 35px;
    color: #FFFFFF;
}

.contact-content {
    padding: 0px 70px;
}

.contact-content h3 {
    font-family: Poppins;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.contact-info p {
    color: #C6C6C6;
    margin-bottom: 15px;
}

.contact-details {
    margin: 0px 0;
}

.contact-details p {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    word-break: break-all;
}

.contact-details p a {
    text-decoration: none;
    color:white
}

.contact-details i {
    color: #ffcf11;
    font-size: 20px;
    width: 25px;
}

.highlight{
    color: #ffcf11;
}

.contact-form .form-control {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #FFFFFF;
    padding: 12px 15px;
    margin-bottom: 15px;
}

.contact-form .form-control:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: #22D3EE;
    box-shadow: 0 0 0 0.2rem rgba(34, 211, 238, 0.25);
}

.contact-form .form-control::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.contact-form button {
    width: 100%;
    margin-bottom: 2px;
}



@media only screen and (max-width: 768px) {
    .contact-content {
        padding: 0px 20px;
    }
    
    .contact-info {
        margin-bottom: 40px;
    }
}

/* Full Screen Offcanvas */
.offcanvas.offcanvas-start {
    width: 100vw;
    height: 100vh;
    background-color: rgba(3, 3, 3, 0.98);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.offcanvas-header {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 1000;
    border: none;
    padding: 0;
}

.offcanvas-header .btn-close {
    font-size: 24px;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: all 0.3s ease;
    opacity: 1;
}

.offcanvas-header .btn-close:hover {
    background-color: rgba(255, 207, 17, 0.2);
    transform: scale(1.1);
}

.offcanvas-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0;
}

.offcanvas-body .navbar-nav {
    text-align: center;
    width: auto;
}

.offcanvas-body .nav-link {
    font-family: Poppins, sans-serif;
    font-size: 32px;
    color: #FFFFFF;
    font-weight: 600;
    padding: 10px 28px;
    border-radius: 50px;
    transition: all 0.3s ease;
    display: inline-block;
}

.offcanvas-body .nav-link:hover {
    background-color: rgba(255, 207, 17, 0.1);
    color: #ffcf11;
    transform: scale(1.05);
}

.offcanvas-body .nav-link.active {
    color: #ffcf11;
    padding: 10px 28px;
}