*{  
    margin: 0;
    padding: 0;
}
html, body {
    height: 100%; background-color: #121212;
}

.navbar {
    width: 100%; height: 46px; left: 0%; top: 0px; position: fixed; z-index: 2;
    background-color: transparent; display: flex; align-items: center;
    top: 0;
}

/* navbar left side*/
.navbar .logo {
    width: 40px; height: 40px; left: 2%; top: 4px; position: absolute; border-radius: 9999px;
}
.priyash {
    left: 7%; top: 5px; position: absolute; color: white; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word;
}
.description {
    left: 7%; top: 29px; position: absolute; color: white; font-size: 10px; font-family: Inter; font-weight: 500; word-wrap: break-word;
}



/* this is for the mobile view items */
.hamburger-menu {
    display: none;
}
.nav-links {
    display: none;
}

/* this is again for the desktop */
/* navbar right side*/

.navbar .right-nav {
    width: 50%; right: 2%; position: absolute; display: flex; flex-direction: row; justify-content: center; align-items: center;
}
.right-nav-text {
    width: 100px; height: auto; position: relative; box-sizing: border-box; color: white; text-align: center;
}
.right-nav-text a{
    text-decoration: none;
    color: white;
}
/* Styles for navbar when scrolled */
.navbar.scrolled {
    background-color: black; /* New background color */
}
.navbar-hidden {
    transform: translateY(-100%); /* Move the navbar out of view */
    transition: transform 0.3s ease-in-out;
}






/* hero section */
.hero-section {
    width: 100%; height: 100vh; position: absolute; z-index: 1; background-color: transparent;
}
.background-cover {
    width: 100%; height: 100vh; left: 0px; top: 0px; position: absolute; object-fit: cover;
}
.hero-content {
    width: 100%; height: 100vh; left: 0px; top: 0px; position: absolute;
}




.cover-text {
    width: 33%; height: auto; left: 10%; top: 35%; position:absolute; display: flex; flex-direction: column; align-items: flex-start;
}

.cover-text .text1 {
    width: 100%; left: 0px; position: relative; color: white; vertical-align: bottom;
    font-size: 3.5vw; font-family: Inter; font-weight: 700; word-wrap: break-word;
}
.cover-text .text2 {
    width: 100%; left: 0px; top: 0px; position: relative; color: white; font-size: 1.2vw;
    font-family: Inter; font-weight: 500; word-wrap: break-word;
}
.cover-text .text3 {
    width: 100%; left: 0px; top: 20px; position: relative; color: white; font-size: 1.2vw;
    font-family: Inter; font-weight: 500; word-wrap: break-word;
}

/* this is for the explore button*/
.explore-btn {
    width: 10%; height: 5%; left: 10%; top: 65%; position: absolute; display: flex;   justify-content: center; align-items: center; border-radius: 5px; font-size: 14px; border: 3px; border-color: black; background-color: #F59E37;
    background: #F59E37; border-radius: 10px; display: flex; justify-content: center; align-items: center;
}
.explore-btn:hover {
    cursor: pointer; background: linear-gradient(to right, #AA367C,#4A2FBD); color: white;
}




.hero-content .cover-profile-photo {
    width: 25%; height: auto; aspect-ratio: 1/1; top: 27%; right: 7.5%; position: absolute; border-radius: 9999px;
}


/* now for the about section*/

.about-section {
    width: 86%; left: 7%; height: 294px; position: absolute; display: flex; justify-content: space-around;
}
.about-img {
    width: 286.57px; height: 294px; position: relative;
}
.about-text {
    width: 650px; height: auto; position: relative;
}
.about-text .text1 {
    left: 0px; top: 5px; height: auto; position: absolute; color: white; font-size: 30px; 
    font-family: serif; font-weight: 700; word-wrap: break-word;
}
.about-text .text2 {
    width: 650px; right: 0%; height: auto; top: 90px; position: absolute; text-align: justify; color: white; 
    font-size: 14px; font-family: serif; font-weight: 500; word-wrap: break-word;
}


.experience-section {
    width: 90%; height: auto; left: 5%; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.exp-heading {
    width: 100%; height: auto; top: 0px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
}
.exp1-section {
    width: 90%; height: 150px; margin-top: 100px; left: 5%; position: relative; display: flex; justify-content: space-around; background-color:#151222; border-radius: 20px;
}
.exp1-logo {
    width: 100px; height: 100px; top: 25px; position: relative; border-radius: 20px; 
}
.exp1-company {
    width:250px; height: 24px; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp1-position {
    width:300px; height: 24px; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp1-duration {
    width:250px; height: 24px; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp2-section {
    width: 90%; height: 150px; margin-top: 30px; left: 5%; position: relative; display: flex; justify-content: space-around; background-color: #151222; border-radius: 20px;
}
.exp2-logo {
    width: 100px; height: 100px; top: 25px; position: relative; border-radius: 20px; 
}
.exp2-company {
    width:250px; height: auto; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp2-position {
    width:300px; height: auto; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp2-duration {
    width:250px; height: auto; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp3-section {
    width: 90%; height: 150px; margin-top: 30px; left: 5%; position: relative; display: flex; justify-content: space-around; background-color: #151222; border-radius: 20px;
}
.exp3-logo {
    width: 100px; height: 100px; top: 25px; position: relative; border-radius: 20px; 
}
.exp3-company {
    width:250px; height: auto; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp3-position {
    width:300px; height: auto; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}
.exp3-duration {
    width:250px; height: auto; top: 65px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
}


.project-section {
    width: 90%; height: auto; left: 5%; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; align-items: center;
}
.project-heading {
    width: 100%; height: auto; top: 0px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
}
.project-sub-heading {
    width: 100%; height: auto; margin-top: 20px; position: relative; color: #D1D1D1; font-size: 18px; font-family: Inter; font-weight: 400; text-align: center; word-wrap: break-word;
}

/* project tab*/
.project-tab {
    width: 80%; height: 50px; margin-top: 80px; position: relative; display: flex; justify-content: space-around;
}
.product-design {
    width: 20%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; border-top-left-radius: 40px; border-bottom-left-radius: 40px; color: white;
}
.product-improvement {
    width: 25%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white;
}
.teardown {
    width: 17.5%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white;
}
.growth {
    width: 17.5%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white;
}
.technical {
    width: 20%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; border-top-right-radius: 40px; border-bottom-right-radius: 40px; color: white;
}
/* Highlight the active tab */
.tab-item.active-tab {
    background: linear-gradient(to right, #AA367C,#4A2FBD);
    font-weight: bold;
}

/* Tab hover effect */
.tab-item:hover {
    background: linear-gradient(to right, #AA367C,#4A2FBD); cursor: pointer;

}


/* Initially hide all content */
.menu-content {
    width: 100%; height: 300px; margin-top: 100px; display: none; position: relative; background-color: transparent; color: white; font-size: 20px;
}
/* Show active content */
.menu-content.active {
    display: flex; justify-content: space-around;
}
.box {
    width: 30%; max-width: 400px; height: auto; aspect-ratio: 1/1; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 20px; overflow: hidden; background-color: red;
}
.box img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image covers the whole box */
    transition: opacity 0.3s ease-in-out; /* Smooth transition for image fade-out */
}
/* Initially hide the text */
.box-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background:  linear-gradient(to right, #AA367C,#4A2FBD); /* Semi-transparent background */
    color: white;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    opacity: 0; /* Text is hidden initially */
    transition: opacity 0.3s ease-in-out; /* Smooth transition for text fade-in */
}

/* Hover effect: Show the text and hide the image */
.box:hover img {
    opacity: 0.3; /* Image fades out */
    
}

.box:hover .box-text {
    opacity: 0.8; /* Text fades in */
    cursor: pointer;
}
.portfolio-btn {
    width: 16%; height: 40px; margin-top: 100px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 20px; border: 3px; border-color: black; background-color: #F59E37;
}
.portfolio-btn:hover {
    cursor: pointer; background: linear-gradient(to right, #AA367C,#4A2FBD); color: white;
}


.skill-section {
    width: 90%; height: auto; left: 5%; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
}
.skill-heading {
    width: 100%; height: auto; top: 0px; margin-bottom: 70px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
}
.skill-row {
    width: 80%; height: 50px; left: 10%; margin-top: 10px; display: flex; flex-direction:row; gap: 10px; position: relative; justify-content: center;
}
.skillset {
    width: 220px; height: 100%; border-style: outset; border-color: white; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 400; color: white;
}
.skillset:hover {
    background: linear-gradient(to right, #AA367C,#4A2FBD);
}


.blog-section {
    width: 95%; height: 800px; position: absolute; display: flex; flex-direction: column; align-items: center; background: linear-gradient(to right, #AA367C,#4A2FBD);
}
.blog-heading {
    width: 100%; height: auto;  margin-top: 50px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
}
.blog-menu {
    width: 90%; height: auto; margin-top: 80px; position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;
}
.blog {
    width: 28%; height: auto; position: relative; display: flex; flex-direction: column; justify-content: center;
}
.blog-img {
    width: 100%; height: auto; aspect-ratio: 1/1; overflow: hidden; border-radius: 20px;
}
.blog-copy {
    width: 100%; height: auto; margin-top: 20px; position: relative; font-size: 20px; font-family: serif; color: white;
}
.blog-btn {
    width: 16%; height: 40px; margin-top: 100px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 20px; border: 3px; border-color: black; background-color: #F59E37;
}
.blog-btn:hover {
    cursor: pointer; background: white;
}



.connect-section {
    width: 100%; height: 400px; position: absolute; background-color: black; display: flex; flex-direction: row;
}
.connect-left {
    width: 60%; height: auto; position: relative; display: flex; flex-direction: column; 
}
.connect-heading1 {
    width: 100px; height: auto; font-family: serif; font-size: 20px; color: white; margin-top: 30px; left: 50px; position: relative;
}
.connect-heading2 {
    width: 300px; height: auto; font-family: serif; font-size: 50px; color: white; margin-top: 20px; left: 50px; position: relative;
}
.connect-text {
    width: 600px; height: auto; font-family: serif; font-size: 14px; color: white; margin-top: 20px; left: 50px; position: relative; word-wrap: break-word;
}
.connecting-medium {
    width: 600px; height: auto; margin-top: 50px; left: 50px; position: relative; display: flex; flex-direction: row;
}
.connecting-logo {
    width: 40px; height: 40px; margin-left: 30px; border-radius: 10px; overflow: hidden; position: relative;
}
.bottom-bar {
    width: 600px; height: auto; margin-top: 50px; left: 50px; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center;
}
.bottom-bar-text {
    width: 120px; height: auto; font-family: serif; font-size: 18px; text-align: center; color: aqua;
}
.bottom-bar-text a{
    text-decoration: none;
    color: white;
}


.connect-right {
    width: 40%; height: auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.contact-detail {
    width: 500px; height: auto; margin-top: 50px; left: 0px; position: relative; display: flex; flex-direction: row; align-items: center;
}
.contact-logo {
    width: 30px; height: 30px; position: relative;   
}
.contact-text {
    width: 600px; height: auto; margin-left: 30px; position: relative; display: flex; flex-direction: column;
}
.contact-text1 {
    width: 100px; height: auto; position: relative; font-size: 20px; color: white; font-family: serif;
}
.contact-text2 {
    width: 400px; height: auto; margin-top: 10px; position: relative; font-size: 14px; color: white; font-family: serif; word-wrap: break-word;
}

/* to add the animation while scrolling and this is for all ype of device */
/* Initial state of the section (hidden and below the viewport) */
.section {
    opacity: 0;
    transform: translateY(100px); /* Start below the viewport */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  }
  
  /* When the section becomes visible */
  .section.visible {
    opacity: 1;
    transform: translateY(0); /* Slide to normal position */
  }
  
  /* Optional: Add scale effect */
  .section.visible {
    transform: translateY(0) scale(1.05); /* Slight zoom-in */
  }
  
  /* Delay for each section */
  .section:nth-child(1) {
    transition-delay: 0.2s;
  }
  
  .section:nth-child(2) {
    transition-delay: 0.4s;
  }
  
  .section:nth-child(3) {
    transition-delay: 0.6s;
  }
  
  .section:nth-child(4) {
    transition-delay: 0.8s;
  }
 

/* for mobile screens */

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

    .navbar {
        width: 100%; height: 46px; left: 0%; top: 0px; position: fixed; z-index: 2;
        background-color: transparent; display: flex; align-items: center;
        top: 0;
    }
    /* navbar left side*/
    .navbar .logo {
        width: 40px; height: 40px; left: 5px; top: 4px; position: absolute; border-radius: 9999px;
    }
    .priyash {
        left: 50px; top: 15px; position: absolute; color: white; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word;
    }
    .description {
        display: none;
    }
    .hamburger-menu {
        display: block; /* Visible on mobile */
        background: none;
        border: none;
        color: white;
        font-size: 28px;
        position: absolute;
        right: 8px;
        z-index: 1000;
    }
    .nav-links {
        display: none;
        margin-top: 44px;
        margin-left: 70%;
        padding: 10px;
        width: 30%; /* or a specific width */
        box-sizing: border-box;
        border-radius: 5px;
    }
    .nav-links a {
        display: block;
        width: 100%;
        margin-left: -10px;
        color: white;
        padding: 15px 10px;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .active.nav-links {
        display: block;
        margin-top: 300px;
        /* Additional styles when menu is active */
    }
    /* this is doing to make the navbar items designed for the desktop view will get hide for mobile view*/    
    .navbar .right-nav {
        display: none;
    }
    /* Styles for navbar when scrolled */
    .navbar.scrolled {
        background-color: black; /* New background color */
    }
    .navbar-hidden {
        transform: translateY(-100%); /* Move the navbar out of view */
        transition: transform 0.3s ease-in-out;
    }

    /*hero section for mobile*/
    .hero-section {
        width: 100%; height: 100vh; position: absolute; z-index: 1; background-color: transparent;
    }
    .background-cover {
        width: 100%; height: 100vh; left: 0px; top: 0px; position: absolute;
    }
    .hero-content {
        width: 100%; height: 100vh; left: 0px; top: 0px; position: absolute;
    }
    .cover-text {
        width: 80%; height: auto; left: 10%; top: 20%; position:absolute; display: flex; flex-direction: column; align-items: flex-start;
    }
    
    .cover-text .text1 {
        width: 100%; left: 0px; position: relative; color: white; vertical-align: bottom;
        font-size: 7.5vw; font-family: Inter; font-weight: 700; word-wrap: break-word;
    }
    .cover-text .text2 {
        width: 100%; left: 0px; top: 0px; position: relative; color: white; font-size: 3.2vw;
        font-family: Inter; font-weight: 500; word-wrap: break-word;
    }
    .cover-text .text3 {
        width: 100%; left: 0px; top: 30px; position: relative; color: white; font-size: 4.2vw;
        font-family: Inter; font-weight: 500; word-wrap: break-word;
    }
    
    /* this is for the explore button*/
    .explore-btn {
        width: 10%; min-width: 100px; height: 5%; min-height: 30px; left: 10%; top: 50%; position: absolute; display: flex;   justify-content: center; align-items: center; border-radius: 5px; font-size: 14px; border: 3px; border-color: black; background-color: #F59E37;
        background: #F59E37; border-radius: 10px; display: flex; justify-content: center; align-items: center;
    }
    .explore-btn:hover {
        cursor: pointer; background: linear-gradient(to right, #AA367C,#4A2FBD); color: white;
    }
    
    .hero-content .cover-profile-photo {
        width: 40%; height: auto; aspect-ratio: 1/1; right: 30%; top: 65%; position: absolute; border-radius: 9999px;
    }
    
    /* now for the about section*/

    .about-section {
        width: 90%; left: 5%; height: auto; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items:center;
    }
    /* image is at bottom of the about section */
    .about-text {
        width: 100%; height: auto; position: relative; top: -250px;
    }
    .about-text .text1 {
        left: 0px; top: 15px; height: auto; position: absolute; color: white; font-size: 30px; 
        font-family: serif; font-weight: 700; word-wrap: break-word;
    }
    .about-text .text2 {
        width: 100%; left: 0%; height: auto; top: 90px; position: absolute; text-align: justify; color: white; 
        font-size: 14px; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .about-img {
        width: 286.57px; height: 294px; position: relative; top: 350px;
    }


    .experience-section {
        width: 90%; height: auto; left: 5%; position: absolute; display: flex; flex-direction: column; justify-content: center;
    }
    .exp-heading {
        width: 100%; height: auto; top: 0px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .exp1-section {
        width: 100%; height: 370px; left: 0%; margin-top: 40px; position: relative; display: flex; flex-direction: column; align-items: center; background-color:#151222; border-radius: 20px;
    }
    .exp1-logo {
        width: 100px; height: 100px; top: 10px; position: relative; border-radius: 20px; 
    }
    .exp1-company {
        width:250px; height: 24px; top: 0px; position: relative; color: white; font-size: 28px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp1-position {
        width:300px; height: 24px; top: 10px; position: relative; color: white; font-size: 20px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp1-duration {
        width:250px; height: 24px; top: -20px; position: relative; color: white; font-size: 20px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp2-section {
        width: 100%; height: 370px; left: 0%; margin-top: 40px; position: relative; display: flex; flex-direction: column; align-items: center; background-color:#151222; border-radius: 20px;
    }
    .exp2-logo {
        width: 100px; height: 100px; top: 10px; position: relative; border-radius: 20px; 
    }
    .exp2-company {
        width:250px; height: 24px; top: 0px; position: relative; color: white; font-size: 28px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp2-position {
        width:300px; height: 24px; top: 10px; position: relative; color: white; font-size: 20px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp2-duration {
        width:250px; height: 24px; top: -20px; position: relative; color: white; font-size: 20px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp3-section {
        width: 100%; height: 370px; left: 0%; margin-top: 40px; position: relative; display: flex; flex-direction: column; align-items: center; background-color:#151222; border-radius: 20px;
    }
    .exp3-logo {
        width: 100px; height: 100px; top: 10px; position: relative; border-radius: 20px; 
    }
    .exp3-company {
        width:250px; height: 24px; top: 0px; position: relative; color: white; font-size: 28px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp3-position {
        width:300px; height: 24px; top: 10px; position: relative; color: white; font-size: 20px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp3-duration {
        width:250px; height: 24px; top: -20px; position: relative; color: white; font-size: 20px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }


    .project-section {
        height: auto; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; align-items: center;
    }
    .project-heading {
        width: 100%; height: auto; top: 0px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .project-sub-heading {
        width: 100%; height: auto; margin-top: 20px; position: relative; color: #D1D1D1; font-size: 18px; font-family: Inter; font-weight: 400; text-align: center; word-wrap: break-word;
    }

    /* project tab*/
    .project-tab {
        width: 98%; height: 50px; margin-top: 60px; position: relative; display: flex; justify-content: space-around;
    }
    .product-design {
        width: 20%; height: 100%; font-size: 12px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; border-top-left-radius: 40px; border-bottom-left-radius: 40px; color: white; text-align: center;
    }
    .product-improvement {
        width: 25%; height: 100%; font-size: 12px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white; text-align: center;
    }
    .teardown {
        width: 17.5%; height: 100%; font-size: 12px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white; text-align: center;
    }
    .growth {
        width: 17.5%; height: 100%; font-size: 12px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white; text-align: center;
    }
    .technical {
        width: 20%; height: 100%; font-size: 12px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; border-top-right-radius: 40px; border-bottom-right-radius: 40px; color: white; text-align: center;
    }
    /* Highlight the active tab */
    .tab-item.active-tab {
        background: linear-gradient(to right, #AA367C,#4A2FBD);
        font-weight: bold;
    }

    /* Tab hover effect */
    .tab-item:hover {
        background: linear-gradient(to right, #AA367C,#4A2FBD); cursor: pointer;

    }


    /* Initially hide all content */
    .menu-content {
        width: 100%; height: auto; margin-top: 50px; position: relative; background-color: transparent; color: white; font-size: 20px;
    }
    /* Show active content */
    .menu-content.active {
        display: flex; flex-direction: column; justify-content: center; align-items: center;
    }
    .box {
        width: 90%; max-width: 300px; height: auto; aspect-ratio: 1.5/1; margin-top: 20px; position: relative; display: flex; align-items: center; border-radius: 20px; overflow: hidden; background-color: red;
    }
    .box img {
        width: 100%;
        height: 100%;
        object-fit: cover; /* Ensures the image covers the whole box */
        transition: opacity 0.3s ease-in-out; /* Smooth transition for image fade-out */
    }
    /* Initially hide the text */
    .box-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:  linear-gradient(to right, #AA367C,#4A2FBD); /* Semi-transparent background */
        color: white;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        opacity: 0; /* Text is hidden initially */
        transition: opacity 0.3s ease-in-out; /* Smooth transition for text fade-in */
    }

    /* Hover effect: Show the text and hide the image */
    .box:hover img {
        opacity: 0.3; /* Image fades out */        
    }

    .box:hover .box-text {
        opacity: 0.8; /* Text fades in */
        cursor: pointer;
    }
    .portfolio-btn {
        width: 60%; max-width: 300px; height: 50px; margin-top: 80px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 20px; border: 3px; border-color: black; background-color: #F59E37;
    }
    .portfolio-btn:hover {
        cursor: pointer; background: linear-gradient(to right, #AA367C,#4A2FBD); color: white;
    }


    .skill-section {
        width: 90%; height: auto; left: 5%; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    }
    .skill-heading {
        width: 100%; height: auto; top: 0px; margin-bottom: 70px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .skill-row {
        width: 90%; height: 50px; left: 5%; margin-top: 10px; display: flex; flex-direction:row; gap: 10px; position: relative; justify-content: center;
    }
    .skillset {
        width: 200px; height: 100%; border-style: outset; border-color: white; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 300; color: white; text-align: center;
    }
    .skillset:hover {
        background: linear-gradient(to right, #AA367C,#4A2FBD);
    }


    .blog-section {
        width: 95%; height: 1300px; position: absolute; display: flex; flex-direction: column; align-items: center; background: linear-gradient(to right, #AA367C,#4A2FBD);
    }
    .blog-heading {
        width: 100%; height: auto;  margin-top: 30px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .blog-menu {
        width: 90%; height: auto; margin-top: 20px; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .blog {
        width: 90%; max-width: 360px; height: auto; position: relative; margin-top: 10px; display: flex; flex-direction: column; justify-content: center; margin-top: 20px; align-items: center;
    }
    .blog-img {
        width: 80%; max-width: 280px; height: auto; aspect-ratio: 1/1; overflow: hidden; border-radius: 20px;
    }
    .blog-copy {
        width: 100%; height: auto; margin-top: 20px; position: relative; font-size: 14px; font-family: serif; color: white; text-align: center;
    }
    .blog-btn {
        width: 20%; min-width: 200px; height: 50px; margin-top: 60px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 20px; border: 3px; border-color: black; background-color: #F59E37;
    }
    .blog-btn:hover {
        cursor: pointer; background: white;
    }



    .connect-section {
        width: 100%; height: 500px; position: absolute; background-color: black; display: flex; flex-direction: column; 
    }
    .connect-left {
        width: 90%; height: auto; position: relative; display: flex; flex-direction: column; left: 5%;
    }
    .connect-heading1 {
        width: 100px; height: auto; font-family: serif; font-size: 20px; color: white; margin-top: 20px; left: 0px; position: relative;
    }
    .connect-heading2 {
        width: 100%; height: auto; font-family: serif; font-size: 50px; color: white; margin-top: 10px; left: 0px; position: relative;
    }
    .connect-text {
        width: 100%; height: auto; font-family: serif; font-size: 14px; color: white; margin-top: 10px; left: 0px; position: relative; word-wrap: break-word;
    }
    .connecting-medium {
        width: 80%; height: auto; margin-top: 30px; left: 10%;; position: relative; display: flex; flex-direction: row; justify-content: space-around;
    }
    .connecting-logo {
        width: 40px; height: 40px; border-radius: 10px; overflow: hidden; position: relative;
    }
    .bottom-bar {
        display: none;
    }
    .bottom-bar-text {
        width: 120px; height: auto; font-family: serif; font-size: 18px; text-align: center; color: aqua;
    }
    .bottom-bar-text a{
        text-decoration: none;
        color: white;
    }

    .connect-right {
        width: 90%; height: auto; position: relative; display: flex; flex-direction: column; left: 5%; margin-top: 30px;;
    }
    .contact-detail {
        width: 100%; height: auto; margin-top: 20px; left: 0%; position: relative; display: flex; flex-direction: row; align-items: center;
    }
    .contact-logo {
        width: 25px; height: 25px; position: relative;   
    }
    .contact-text {
        width: 100%; height: auto; margin-left: 30px; position: relative; display: flex; flex-direction: column;
    }
    .contact-text1 {
        width: 100%; height: auto; position: relative; font-size: 20px; color: white; font-family: serif;
    }
    .contact-text2 {
        width: 100%; height: auto; margin-top: 10px; position: relative; font-size: 14px; color: white; font-family: serif; word-wrap: break-word;
    }

}

/* for tabet screen */
@media only screen and ((min-width: 769px) and (max-width: 1200px)) {


    .navbar {
        width: 100%; height: 46px; left: 0%; top: 0px; position: fixed; z-index: 2;
        background-color: transparent; display: flex; align-items: center;
        top: 0;
    }
    /* navbar left side*/
    .navbar .logo {
        width: 40px; height: 40px; left: 5px; top: 4px; position: absolute; border-radius: 9999px;
    }
    .priyash {
        left: 50px; top: 15px; position: absolute; color: white; font-size: 16px; font-family: Inter; font-weight: 700; word-wrap: break-word;
    }
    .description {
        display: none;
    }
    .hamburger-menu {
        display: block; /* Visible on mobile */
        background: none;
        border: none;
        color: white;
        font-size: 28px;
        position: absolute;
        right: 8px;
        z-index: 1000;
    }
    .nav-links {
        display: none;
        margin-top: 44px;
        margin-left: 70%;
        padding: 10px;
        width: 30%; /* or a specific width */
        box-sizing: border-box;
        border-radius: 5px;
    }
    .nav-links a {
        display: block;
        width: 100%;
        margin-left: -10px;
        color: white;
        padding: 15px 10px;
        text-decoration: none;
        background-color: rgba(0, 0, 0, 0.7);
    }
    .active.nav-links {
        display: block;
        margin-top: 300px;
        /* Additional styles when menu is active */
    }
    /* this is doing to make the navbar items designed for the desktop view will get hide for mobile view*/    
    .navbar .right-nav {
        display: none;
    }
    /* Styles for navbar when scrolled */
    .navbar.scrolled {
        background-color: black; /* New background color */
    }
    .navbar-hidden {
        transform: translateY(-100%); /* Move the navbar out of view */
        transition: transform 0.3s ease-in-out;
    }

    /*hero section for mobile*/
    .hero-section {
        width: 100%; height: 100vh; position: absolute; z-index: 1; background-color: transparent;
    }
    .background-cover {
        width: 100%; height: 100vh; left: 0px; top: 0px; position: absolute;
    }
    .hero-content {
        width: 100%; height: 100vh; left: 0px; top: 0px; position: absolute;
    }
    .cover-text {
        width: 80%; height: auto; left: 10%; top: 20%; position:absolute; display: flex; flex-direction: column; align-items: flex-start;
    }
    
    .cover-text .text1 {
        width: 100%; left: 0px; position: relative; color: white; vertical-align: bottom;
        font-size: 5.5vw; font-family: Inter; font-weight: 700; word-wrap: break-word;
    }
    .cover-text .text2 {
        width: 100%; left: 0px; top: 0px; position: relative; color: white; font-size: 2.2vw;
        font-family: Inter; font-weight: 500; word-wrap: break-word;
    }
    .cover-text .text3 {
        width: 100%; left: 0px; top: 30px; position: relative; color: white; font-size: 3.0vw;
        font-family: Inter; font-weight: 500; word-wrap: break-word;
    }
    
    /* this is for the explore button*/
    .explore-btn {
        width: 10%; min-width: 100px; height: 5%; min-height: 30px; left: 10%; top: 50%; position: absolute; display: flex;   justify-content: center; align-items: center; border-radius: 5px; font-size: 16px; border: 3px; border-color: black; background-color: #F59E37;
        background: #F59E37; border-radius: 10px; display: flex; justify-content: center; align-items: center;
    }
    .explore-btn:hover {
        cursor: pointer; background: linear-gradient(to right, #AA367C,#4A2FBD); color: white;
    }
    
    .hero-content .cover-profile-photo {
        width: 35%; height: auto; aspect-ratio: 1/1; right: 30%; top: 55%; position: absolute; border-radius: 9999px;
    }


    
    /* now for the about section*/

    .about-section {
        width: 90%; left: 5%; height: auto; position: absolute; display: flex; flex-direction: column; justify-content: center; align-items:center;
    }
    /* image is at bottom of the about section */
    .about-text {
        width: 100%; height: auto; position: relative; top: -250px;
    }
    .about-text .text1 {
        left: 0px; top: 15px; height: auto; position: absolute; color: white; font-size: 30px; 
        font-family: serif; font-weight: 700; word-wrap: break-word;
    }
    .about-text .text2 {
        width: 100%; left: 0%; height: auto; top: 90px; position: absolute; text-align: justify; color: white; 
        font-size: 16px; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .about-img {
        width: 286.57px; height: 294px; position: relative; top: 350px;
    }

    .experience-section {
        width: 100%; height: auto; left: 0%; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    }
    .exp-heading {
        width: 100%; height: auto; top: 0px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .exp1-section {
        width: 90%; height: 150px; margin-top: 80px; left: 5%; position: relative; display: flex; justify-content: space-around; background-color:#151222; border-radius: 20px;
    }
    .exp1-logo {
        width: 100px; height: 100px; top: 25px; position: relative; border-radius: 20px; 
    }
    .exp1-company {
        width: 100px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp1-position {
        width:200px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp1-duration {
        width:200px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp2-section {
        width: 90%; height: 150px; margin-top: 20px; left: 5%; position: relative; display: flex; justify-content: space-around; background-color:#151222; border-radius: 20px;
    }
    .exp2-logo {
        width: 100px; height: 100px; top: 25px; position: relative; border-radius: 20px; 
    }
    .exp2-company {
        width: 100px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp2-position {
        width:200px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp2-duration {
        width:200px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp3-section {
        width: 90%; height: 150px; margin-top: 20px; left: 5%; position: relative; display: flex; justify-content: space-around; background-color:#151222; border-radius: 20px;
    }
    .exp3-logo {
        width: 100px; height: 100px; top: 25px; position: relative; border-radius: 20px; 
    }
    .exp3-company {
        width: 100px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp3-position {
        width:200px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }
    .exp3-duration {
        width:200px; height: 24px; top: 50px; position: relative; color: white; font-size: 24px; text-align: center; font-family: serif; font-weight: 500; word-wrap: break-word;
    }


    .project-section {
        width: 90%; height: auto; left: 5%; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; align-items: center;
    }
    .project-heading {
        width: 100%; height: auto; top: 0px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .project-sub-heading {
        width: 100%; height: auto; margin-top: 20px; position: relative; color: #D1D1D1; font-size: 18px; font-family: Inter; font-weight: 400; text-align: center; word-wrap: break-word;
    }

    /* project tab*/
    .project-tab {
        width: 90%; height: 50px; margin-top: 80px; position: relative; display: flex; justify-content: space-around;
    }
    .product-design {
        width: 20%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; border-top-left-radius: 40px; border-bottom-left-radius: 40px; color: white; text-align: center;
    }
    .product-improvement {
        width: 25%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white; text-align: center;
    }
    .teardown {
        width: 17.5%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white; text-align: center;
    }
    .growth {
        width: 17.5%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; color: white; text-align: center;
    }
    .technical {
        width: 20%; height: 100%; font-size: 20px; display: flex; justify-content: center; align-items: center; border: 2px; border-color: white; border-style: outset; border-top-right-radius: 40px; border-bottom-right-radius: 40px; color: white; text-align: center;
    }
    /* Highlight the active tab */
    .tab-item.active-tab {
        background: linear-gradient(to right, #AA367C,#4A2FBD);
        font-weight: bold;
    }

    /* Tab hover effect */
    .tab-item:hover {
        background: linear-gradient(to right, #AA367C,#4A2FBD); cursor: pointer;

    }


    /* Initially hide all content */
    .menu-content {
        width: 100%; height: 300px; margin-top: 100px; display: none; position: relative; background-color: transparent; color: white; font-size: 20px;
    }
    /* Show active content */
    .menu-content.active {
        display: flex; justify-content: space-between;
    }
    .box {
        width: 30%; max-width: 400px; height: auto; aspect-ratio: 1/1; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 20px; overflow: hidden; background-color: red;
    }
    .box img {
        width: 100%;
        height: 100;
        object-fit: cover; /* Ensures the image covers the whole box */
        transition: opacity 0.3s ease-in-out; /* Smooth transition for image fade-out */
    }
    /* Initially hide the text */
    .box-text {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:  linear-gradient(to right, #AA367C,#4A2FBD); /* Semi-transparent background */
        color: white;
        display: flex;
        text-align: center;
        justify-content: center;
        align-items: center;
        font-size: 18px;
        opacity: 0; /* Text is hidden initially */
        transition: opacity 0.3s ease-in-out; /* Smooth transition for text fade-in */
    }

    /* Hover effect: Show the text and hide the image */
    .box:hover img {
        opacity: 0.3; /* Image fades out */
        
    }

    .box:hover .box-text {
        opacity: 0.8; /* Text fades in */
        cursor: pointer;
    }
    .portfolio-btn {
        width: 20%; width: 240px; height: 40px; margin-top: 100px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 20px; border: 3px; border-color: black; background-color: #F59E37;
    }
    .portfolio-btn:hover {
        cursor: pointer; background: linear-gradient(to right, #AA367C,#4A2FBD); color: white;
    }


    .skill-section {
        width: 90%; height: auto; left: 5%; position: absolute; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
    }
    .skill-heading {
        width: 100%; height: auto; top: 0px; margin-bottom: 70px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .skill-row {
        width: 94%; height: 50px; left: 3%; margin-top: 10px; display: flex; flex-direction:row; gap: 10px; position: relative; justify-content: center;
    }
    .skillset {
        width: 220px; height: 100%; border-style: outset; border-color: white; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-size: 20px; font-weight: 400; color: white; text-align: center;
    }
    .skillset:hover {
        background: linear-gradient(to right, #AA367C,#4A2FBD);
    }


    .blog-section {
        width: 95%; height: 800px; position: absolute; display: flex; flex-direction: column; align-items: center; background: linear-gradient(to right, #AA367C,#4A2FBD);
    }
    .blog-heading {
        width: 100%; height: auto;  margin-top: 50px; position: relative; color: white; font-size: 30px; font-family: Inter; font-weight: 700; text-align: center; word-wrap: break-word;
    }
    .blog-menu {
        width: 90%; height: auto; margin-top: 80px; position: relative; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start;
    }
    .blog {
        width: 28%; height: auto; position: relative; display: flex; flex-direction: column; justify-content: center;
    }
    .blog-img {
        width: 100%; height: auto; aspect-ratio: 1/1; overflow: hidden; border-radius: 20px;
    }
    .blog-copy {
        width: 100%; height: auto; margin-top: 20px; position: relative; font-size: 20px; font-family: serif; color: white;
    }
    .blog-btn {
        width: 16%; height: 40px; margin-top: 100px; position: relative; display: flex; justify-content: center; align-items: center; border-radius: 10px; font-size: 20px; border: 3px; border-color: black; background-color: #F59E37;
    }
    .blog-btn:hover {
        cursor: pointer; background: white;
    }


    .connect-section {
        width: 100%; height: 400px; position: absolute; background-color: black; display: flex; flex-direction: row;
    }
    .connect-left {
        width: 50%; height: auto; position: relative; display: flex; flex-direction: column; 
    }
    .connect-heading1 {
        width: 100px; height: auto; font-family: serif; font-size: 20px; color: white; margin-top: 30px; left: 25px; position: relative;
    }
    .connect-heading2 {
        width: 300px; height: auto; font-family: serif; font-size: 50px; color: white; margin-top: 20px; left: 25px; position: relative;
    }
    .connect-text {
        width: 90%; height: auto; font-family: serif; font-size: 14px; color: white; margin-top: 10px; left: 25px; position: relative; word-wrap: break-word;
    }
    .connecting-medium {
        width: 100%; height: auto; margin-top: 50px; left: 10px; position: relative; display: flex; flex-direction: row; justify-content: space-around;
    }
    .connecting-logo {
        width: 40px; height: 40px; border-radius: 10px; overflow: hidden; position: relative;
    }
    .bottom-bar {
        width: 90%; height: auto; margin-top: 50px; left: 5%; position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center;
    }
    .bottom-bar-text {
        width: 120px; height: auto; font-family: serif; font-size: 18px; text-align: center; color: aqua;
    }
    .bottom-bar-text a{
        text-decoration: none;
        color: white;
    }

    .connect-right {
        width: 50%; height: auto; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
    }
    .contact-detail {
        width: 100%; height: auto; margin-top: 50px; left: 0px; position: relative; display: flex; flex-direction: row; align-items: center;
    }
    .contact-logo {
        width: 30px; height: 30px; position: relative;   
    }
    .contact-text {
        width: 90%; height: auto; margin-left: 10%; position: relative; display: flex; flex-direction: column;
    }
    .contact-text1 {
        width: 100%; height: auto; position: relative; font-size: 20px; color: white; font-family: serif;
    }
    .contact-text2 {
        width: 100%; height: auto; margin-top: 10px; position: relative; font-size: 14px; color: white; font-family: serif; word-wrap: break-word;
    }


}