*{
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-family: 'kumbh Sans', sans-serif;
    }
    body {
        overflow-x: hidden;
        background: #000; /* Dark background to simulate the night sky */
    
    }

    .starry-background {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        z-index: 0;
    }

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

    .star {
        position: absolute;
        width: 2px;
        height: 2px;
        background: white;
        border-radius: 50%;
        animation: twinkle 2s infinite alternate;
        opacity: 0.8;
    }

    /* Generate multiple stars dynamically */
    @keyframes move-stars {
        from {
            transform: translateY(0);
        }
        to {
            transform: translateY(-200%);
        }
    }


    .navbar{
        background: #141414;
        height: 80px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 1.2rem;
        position: sticky;
        top: 0;
        z-index: 999;
    }

    .navbar__container{
        display: flex;
        justify-content: space-between;
        height: 80px;
        width: 100%;
        max-width: 1300px;
        z-index: 1;
        margin: 0 auto;
        padding: 0 10px;
    }

    #navbar__logo{
        background-color: #ff8177;
        background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color: transparent;
        display: flex;
        align-items: center;
        cursor: pointer;
        text-decoration: none;
        font-size: 1.5rem;
    }
    .logo-image {
        height: 60px; /* Set initial height */
        margin-right: 10px; /* Space between image and text */
        transition: all 0.3s ease; /* Smooth transition */
        
    }

    #navbar__logo:hover .logo-image {
        transform: scale(1.7); /* Scale to 170% on hover */
    }

    .navbar__menu{
        display: flex;
        align-items: center;
        list-style: none;
        text-align: center;
    }

    .navbar__item{
        height: 80px;
    }

    .navbar__links{
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none;
        padding: 0 1rem;
        height: 100%;
    }

    .navbar__btn{
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0 1rem;
        width: 100%;
    }


    .button{
        display: flex;
        justify-content: center;
        align-items: center;
        text-decoration: none;
        padding: 10px 20px;
        height: 100%;
        width:100%;
        border: none;
        outline: none;
        border-radius: 4px;
        background: #f77062;
        color: white
    }

    .button:hover{
        background: #4837ff;
        transition: all 0.3s ease;
    }

    .navbar__links:hover{
        color: #f77062;
        transition: all 0.3s ease;
    }

    @media screen and (max-width: 960px){
        .navbar__container{
            display: flex;
            justify-content: space-between;
            height: 80px;
            z-index: 1;
            width: 100%;
            max-width: 200px;
            padding: 0;
           
        }

        .navbar__menu{
            display: grid;
            grid-template-columns: auto;
            margin: 0;
            width: 100%;
            position: absolute;
            top: -1000px;
            opacity: 0;
            transition: all 0.5s ease;
            height: 50vh;
            z-index: -1;
            background: #131313;
        }

        .navbar__menu.active{
            background: #131313;
            top: 100%;
            opacity: 1;
            transition: all 0.5s ease;
            z-index: 99;
            height: 50vh;
            font-size: 1.6rem;
        }

        .navbar__logo{
            padding-left: 25px;

        }

        .navbar__toggle .bar{
            width: 25px;
            height: 3px;
            margin: 5px auto;
            transition: all 03.s ease-in-out;
            background: #fff;

        }

        .navbar__item{
            width: 100%;
        }

        .navbar_links{
            text-align: center;
            padding: 2rem;
            width: 100%;
            display: table;
        }


        #mobile-menu{
            position: absolute;
            top: 20%;
            right: 5%;
            transform: translate(5%, 20%);
        }

        .navbar__btn{
            padding-bottom: 2rem;
        }

        .button{
            display: flex;
            justify-content: center;
            align-items: center;
            width: 80%;
            height: 80px;
            margin: 0;
        }

        .navbar__toggle .bar{
            display: block;
            cursor: pointer;
        }

        #mobile-menu.is-active .bar:nth-child(2){
            opacity:0;
        }
        #mobile-menu.is-active .bar:nth-child(1){
            transform:translateY(8px) rotate(45deg);
        }
        #mobile-menu.is-active .bar:nth-child(3){
            transform:translateY(-8px) rotate(-45deg);
        }

    }

    /* hero section css */
    .main{
        background-color: #141414;
        min-height: 100vh; /* Ensure the main section covers the full viewport height */
        display: flex;     /* Added to ensure vertical centering */
        align-items: center;
        
    }
    .main__container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-self: center;
        margin: 0 auto;
        height: 90vh;
        background-color: #141414;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
        padding: 0 50px; 
    }

    .main__content h1{
    font-size: 4rem;
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0944 0%, #ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color:transparent;
    }

    .main__content h2{
        font-size: 4rem;
        background-color: #ff8177;
        background-image: linear-gradient(to top, #b721ff 0%, #21d4fd 100%);
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color:transparent;
    }

    .main__content p{
        margin-top : 1rem;
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
    }

    .main__btn{
        font-size: 1rem;
        background-image: linear-gradient(to top,#f77062 0%,#fe5196 100%);
        padding: 14px 32px;
        border: none;
        border-radius: 4px;
        color: #fff;
        margin-top: 2rem;
        cursor: pointer;
        position: relative;
        transition: all 0.35s;
        outline: none;

    }

    .main__btn a{
        position: relative;
        z-index: 2;
        color: #fff;
        text-decoration: none;

    }
    .main__btn:after{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width:0;
        height: 100%;
        background: #4837ff;
        transition: all 0.35s;
        border-radius: 4px
    }

    .main__btn:hover{
        color:#fff
    }
    .main__btn:hover:after{
        width: 100%;
    }
    .main__img--container{

        text-align: center;
    
    }

    #main__img{
        height: 80%;
        width: 80%;
        border-radius: 10px;
    }

    /* Mobile response */

    @media screen and (max-width:760px)
    {
    .main__container{
            /* display: grid;
            grid-template-columns: auto;
            align-items: center;
            justify-self: center;
            width: 100%;
            margin: 0 auto;
            height: 90vh; */
            grid-template-columns: auto; /* Single column layout for mobile */
            height: auto; /* Let height expand based on content */
            padding: 20px; 
            
    }   

    .main__content{
        text-align: center;
        margin-bottom: 4rem;
    }
    .main__content h1{
        font-size: 2.5rem;
        margin-top: 2rem;
    }

    .main__content h2{
        font-size: 3rem;
    }

    .main__content p{
        margin-top: 1rem;
        font-size: 1.5rem;
    }
    .main__img--container {
        text-align: center;
        margin-bottom: 2rem; /* Add margin to space it well on mobile */
    }

    #main__img {
        width: 100%;
        max-width: 300px; /* Adjust the image size for mobile */
        border-radius: 10px;
    }
    }

    @media screen and (max-width: 480px){
        .main__content h1{
            font-size: 2rem;
            margin-top: 2rem;
        }
        
        .main__content h2{
            font-size: 2rem;
        }
        
        .main__content p{
            margin-top: 2rem;
            font-size: 1.5rem;
        }
        .main__btn{
            padding: 12px 36px;
            margin: 2.5rem 0;
        }
    }

    /* Resume styling starts here */


    /* Centering the PDF container */
    .pdf-container {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw; /* Full width of the viewport */
        height: 100vh; /* Full height of the viewport */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optional shadow for aesthetics */
        background-color: white; /* White background for the PDF container */
        overflow: hidden; /* Hide overflow to maintain aspect ratio */
    }
    
    .pdf-container iframe {
        width: 100%; /* Full width of the container */
        height: 100%; /* Full height of the container */
        border: none; /* Remove border */
    }
    
    .download-fallback {
        text-align: center; /* Center the download link */
        padding: 1rem; /* Padding around the text */
        display: none; /* Hide by default */
    }
    
    /* Media queries for responsiveness */
    @media (max-width: 600px) {
        .pdf-container {
            padding: 10px; /* Optional padding on smaller screens */
            box-shadow: none; /* Remove shadow for smaller screens */
        }
    
        .pdf-container iframe {
            height: calc(100vh - 60px); /* Slightly adjust height for any header/footer */
        }
    
        .download-fallback {
            display: block; /* Show download link on smaller screens */
        }
    }
    
    @media (max-width: 480px) {
        .pdf-container {
            padding: 0; /* Remove any padding */
        }
    
        .pdf-container iframe {
            height: calc(100vh - 20px); /* Adjust height for very small screens */
        }
    }


    /* Resume styling ends here */

    /* Contact section starts here */
    .contact{
        background-color: #141414;
        min-height: 100vh; /* Ensure the main section covers the full viewport height */
        display: flex;     /* Added to ensure vertical centering */
        align-items: center;
        transition: all 0.3s ease;
        
        
    }
    .contact__container{
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        justify-self: center;
        margin: 0 auto;
        height: 90vh;
        background-color: #141414;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
    padding: 0 50px; 
    transition: all 0.3s ease;
    
    }

    .contact__content h1{
    font-size: 4rem;
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0944 0%, #ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color:transparent;
    transition: all 0.3s ease;
    }

    .contact__content h2{
        font-size: 3rem;
        background-color: #ff8177;
        background-image: linear-gradient(to top, #b721ff 0%, #21d4fd 100%);
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color:transparent;
        margin-top: 2rem;
        transition: all 0.3s ease;
    }

    .contact__content p{
        margin-top : 1.5rem;
        font-size: 2rem;
        font-weight: 700;
        color: #fff;
        transition: all 0.3s ease;
    }

    .contact__img--container{

        text-align: center;
        transition: all 0.3s ease;
    
    }

    #contact__img{
        height: 80%;
        width: 80%;
        border-radius: 10px;
        transition: all 0.3s ease;
    }



    @media screen and (max-width:760px)
    {
    .contact__container{
            /* display: grid;
            grid-template-columns: auto;
            align-items: center;
            justify-self: center;
            width: 100%;
            margin: 0 auto;
            height: 90vh; */
            grid-template-columns: auto; /* Single column layout for mobile */
            height: auto; /* Let height expand based on content */
            padding: 20px; 
            
    }   

    .contact__content{
        text-align: center;
        margin-bottom: 4rem;
    }
    .contact__content h1{
        font-size: 3rem;
        margin-top: 2rem;
        
    }

    .contact__content h2{
        font-size: 2rem;
    }

    .contact__content p{
        margin-top: 1rem;
        font-size: 1rem;
    }
    .contact__img--container {
        text-align: center;
        margin-bottom: 2rem; /* Add margin to space it well on mobile */
    }

    #contact__img {
        width: 100%;
        max-width: 300px; /* Adjust the image size for mobile */
        border-radius: 10px;
    }

    }

    @media screen and (max-width: 480px){
        .contact__content h1{
            font-size: 1.5rem;
            margin-top: 2rem;
        }
        
        .contact__content h2{
            font-size: 1.5rem;
        }
        
        .contact_content p{
            margin-top: 2rem;
            font-size: 1rem;
        }
        
    }
    .contactdetails{
        
        background-color: #141414;
        min-height: 80px; /* Ensure the main section covers the full viewport height */
        display: flex;     /* Added to ensure vertical centering */
        align-items: top;
        transition: all 0.3s ease;  
    }
    .contactdetails__container{
        display: grid;
        grid-template-rows: 1fr 1fr;
        align-items: center;
        justify-self: center;
        justify-content: center;
        margin: 0 auto;
        height: 10rem;
        background-color: #141414;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
    transition: all 0.3s ease;
    }
    .contactdetails__content p{
        margin-top : 1.5rem;
        font-size: 2rem;
        font-weight: 700;
        background-color: #ff8177;
        background-image: linear-gradient(to top, #ff0944 0%, #ffb199 100%);
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color:transparent;
        transition: all 0.3s ease;
    
    }
    .contactdetails__content p{
        align-items: center;
        }
        .contactdetails__btn{
            font-size: 1rem;
            background-image: linear-gradient(to top,#f77062 0%,#fe5196 100%);
            padding: 14px 32px;
            border: none;
            border-radius: 4px;
            color: #fff;
            margin-top: 2rem;
            cursor: pointer;
            position: relative;
            transition: all 0.35s;
            outline: none;
            margin-top: 2rem;
            margin-bottom: 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: auto;
            margin-right: auto;
        
        }

       
    .contactdetails__btn a{
        position: relative;
        z-index: 2;
        color: #fff;
        text-decoration: none;

    }
    .contactdetails__btn:after{
        position: absolute;
        content: '';
        top: 0;
        left: 0;
        width:0;
        height: 100%;
        background: #4837ff;
        transition: all 0.35s;
        border-radius: 4px
    }

    .contactdetails__btn:hover{
        color:#fff
    }
    .contactdetails__btn:hover:after{
        width: 100%;
    }

    @media screen and (max-width:760px)
    {
    .contactdetails__container{
            /* display: grid;
            grid-template-columns: auto;
            align-items: center;
            justify-self: center;
            width: 100%;
            margin: 0 auto;
            height: 90vh; */
            grid-template-rows: auto; /* Single column layout for mobile */
            height: auto; /* Let height expand based on content */
            padding: 20px; 
            
    }   

    .contactdetails__content{
        text-align: center;
        margin-bottom: 5rem;
    }


    .contactdetails__content p{
        margin-top: 1rem;
        font-size: 2rem;
    }
    

    }
    @media screen and (max-width: 480px){
        
        .contact_content p{
            margin-top: 2rem;
            font-size: 2rem;
        }
    }
    /* Contact section ends here */

    /* skills section starts here */

    .skills{
        background-color: #141414;
        min-height: 100vh; /* Ensure the main section covers the full viewport height */
        display: flex;     /* Added to ensure vertical centering */
        align-items: center;
        transition: all 0.3s ease; 
    }
    .skills__container{
        /* display: grid; */
    
        /* grid-template-columns: 1fr 1fr; */
        align-items: center;
        margin: 0 auto;
        height: 90vh;
        background-color: #141414;
        z-index: 1;
        width: 100%;
        max-width: 1300px;
    padding: 0 50px; 
    transition: all 0.3s ease;
    
    }

    .skills__content h1{
    font-size: 2rem;
    background-color: #ff8177;
    background-image: linear-gradient(to top, #ff0944 0%, #ffb199 100%);
    background-size: 100%;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    -webkit-text-fill-color: transparent;
    -moz-text-fill-color:transparent;
    align-items: center;
    transition: all 0.3s ease;
    }

    .skills__content h2{
        font-size: 1.5rem;
        background-color: #ff8177;
        background-image: linear-gradient(to top, #b721ff 0%, #21d4fd 100%);
        background-size: 100%;
        -webkit-background-clip: text;
        -moz-background-clip: text;
        -webkit-text-fill-color: transparent;
        -moz-text-fill-color:transparent;
        margin-top: 2rem;
        padding: 10px 10px ;
        transition: all 0.3s ease;
    }

    .skills__content p{
        margin-top : 1.5rem;
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        transition: all 0.3s ease;
    }

    /* skills section ends here */