.dark_mode_toggle
{
    height: 2.5rem;
    width: 2.5rem;
    border: 0px solid grey;
    border-radius: 50%;
    /* z-index: 10000; */
    background-color: transparent;
    backdrop-filter: blur(10px);
    background-image: url("sun_lightmode.svg");
    background-size: cover;
}
.tech-stack-used
{
    /* font-family: 'Monospace', monospace; */
    border: .5px dotted rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    max-width: fit-content;
    padding: 0em .5em;
    color: rgb(70, 70, 70);
    background-color: rgba(239, 239, 239, 0.5);
    transition:0.2s ease-in-out;
}

.tech-stack-used:hover{
    transform: scale(1.08);
    transition:0.2s ease-in-out;
}
.tech-stack-div
{
    max-width: fit-content;
    display: flex;
    gap: .5em;
    padding-top: .75em;
}
.sidebar {
    display: flex;
    width: 20.16vw;
    flex-direction: column;
    justify-items: center;
    align-items: center;
    /* gap: 0px; */
    justify-content: space-evenly;
    position: fixed;
    height: 90vh;
    margin-top: 3.1vh;
    margin-left: 2vw;
    transition-duration: 0.5s;
    transition-timing-function: ease in;
    border-top: 1px solid rgba (255, 255, 255, 0.4);
    border-left: 1px solid rgba (255, 255, 255, 0.4);
    /* background-color: rgba (255,255,255,0.4); */
    border-radius: 25px;
}

.sidebar:hover {
    width: 23vw;
    transition-duration: 0.5s;
    transition-timing-function: ease in;
    background-color: rgb(244, 243, 243, 0.5);
    backdrop-filter: blur(2px);
    border-top: 1px solid rgba (255, 255, 255, 0.4);
    border-left: 1px solid rgba (255, 255, 255, 0.4);
    /* background-color: rgba (255,255,255,0.4); */
    border-radius: 25px;
    box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
}
.mobile-logo
{
    display: none;
}
.dp {
    border: 1.5px solid rgb(109, 109, 109);
    border-radius: 50%;
    width: 150px;
    height: 150px;
    /* margin-top: px; */
    background-image: url("dp\ shourya.jpg");
    background-size: cover;
    box-shadow: -4px 4px 13.5px rgba(0, 0, 0, 0.5);
    transition-duration: .5s;
    transition-timing-function: ease in;
}

.dp:hover {
    width: 200px;
    height: 200px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    box-shadow: -8px 6px 13.5px rgba(0, 0, 0, 0.7);
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
}

.about_me {
    font-family: Poppins;
    font-size: 22px;
    /* text-shadow:0px 4px 4px rgba(0, 0, 0,0.2) ; */
    margin-top: 20px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: #575757;
}

.about_me:hover {
    font-size: 26px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: black;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    /* text-decoration: underline; */
}

.skills {
    font-family: Poppins;
    font-size: 22px;
    /* text-shadow:0px 4px 4px rgba(0, 0, 0,0.2) ; */
    color: rgb(87, 87, 87);
    transition-duration: .5s;
    transition-timing-function: ease in;
}

.skills:hover {
    font-size: 26px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: black;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    /* text-decoration: underline; */
}

.projects {
    font-family: Poppins;
    font-size: 22px;
    /* text-shadow:0px 4px 4px rgba(0, 0, 0,0.2) ; */
    color: rgb(87, 87, 87);
    transition-duration: .5s;
    transition-timing-function: ease in;
}

.projects:hover {
    font-size: 26px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: black;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    /* text-decoration: underline; */
}

.contact_me {
    font-family: Poppins;
    font-size: 22px;
    /* text-shadow:0px 4px 4px rgba(0, 0, 0,0.2) ; */
    color: rgb(87, 87, 87);
    transition-duration: .5s;
    transition-timing-function: ease in;
}

.contact_me:hover {
    font-size: 26px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: black;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    /* text-decoration: underline; */
}

.github_logo {
    width: 20px;
    height: 20px;
    background-image: url("git_logo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 10px;
    margin-inline-start: .3em;
    display: inline-block;
    transition-duration: .5s;
    transition-timing-function: ease in;
    opacity: 70%;
}

.github_logo:hover {
    width: 25px;
    height: 25px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: black;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    opacity: 100%;
    /* text-decoration: underline; */
}

.linkedin_logo {
    width: 20px;
    height: 20px;
    background-image: url("linkedin_logo.png");
    transition-duration: .5s;
    transition-timing-function: ease in;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 10px;
    display: inline-block;
    margin-inline-start: .3em;
    filter: saturate(0%) contrast(2);
    opacity: 70%;

}

.linkedin_logo:hover {
    width: 25px;
    height: 25px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: black;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    opacity: 100%;
    /* text-decoration: underline; */
}

.x_logo {
    width: 20px;
    height: 20px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    background-image: url("X-Logo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: inline-block;
    margin-inline-start: .3em;
    opacity: 70%;
    /* filter: saturate(0%) contrast(2); */
}

.x_logo:hover {
    width: 25px;
    height: 25px;
    transition-duration: .5s;
    transition-timing-function: ease in;
    color: black;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    opacity: 100%;
    /* text-decoration: underline; */
}

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    /* ✅ No page scroll */
    font-family: 'Poppins', sans-serif;
    display: flex;
    background-color: rgb(255, 255, 255);
    background-image:
        linear-gradient(to right, #dedede 1px, transparent 1px),
        linear-gradient(to bottom, #dedede 1px, transparent 1px);
    background-size: 40px 40px;
    cursor: url('icons8-mouse-cursor-48.png') 0 0, auto;
}

.main_body {
    margin-left: 26.16vw;
    /* push it right so it doesn’t overlap sidebar */
    padding: 20px;
    /* optional: add some inner spacing */
    height: 100vh;
    /* ✅ Make it same as viewport */
    overflow-y: hidden;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.name {
    font-family: Poppins;
    margin-top: 10vh;
    font-size: 2.5em;
    text-align: right;
    margin-right: 8.5vw;
    text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.25);
    display: flex;
    justify-content: right;
    align-items: center;
    gap: 1vw;

}

.degree {
    font-family: Poppins;
    font-size: 1.2em;
    text-align: right;
    margin-right: 8.5vw;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.25);
    color: rgb(87, 87, 87);
}

.nav_buttons {
    width: 15px;
    height: 15px;
    background-color: #F8B5B5;
    border: 0px solid #F8B5B5;
    border-radius: 50%;
    text-align: right;
    position: absolute;
    top: 10px;
    left: 15px;
    display: flex;
    gap: 8px;
    display: inline;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
}

.max_but {
    width: 15px;
    height: 15px;
    background-color: aquamarine;
    border: 0px solid #F8B5B5;
    border-radius: 50%;
    text-align: right;
    position: absolute;
    top: 10px;
    left: 38px;
    display: flex;
    gap: 8px;
    display: inline;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
}

.min_but {
    width: 15px;
    height: 15px;
    background-color: rgb(236, 255, 127);
    border: 0px solid #F8B5B5;
    border-radius: 50%;
    text-align: right;
    position: absolute;
    top: 10px;
    left: 61px;
    display: flex;
    gap: 8px;
    display: inline;
    box-shadow: 0px 4px 5px rgba(0, 0, 0, 0.2);
}

.nav_buttons:hover {
    background-color: red;
    width: 17px;
    height: 17px;
}

.min_but:hover {
    background-color: yellow;
    width: 17px;
    height: 17px;
}

.max_but:hover {
    background-color: aqua;
    width: 17px;
    height: 17px;
}

.introduction {
    font-family: Poppins;
    text-align: left;

    /* height: 100%;  */
    overflow-y: auto;
    /* Enables vertical scroll */
    padding-left: 30px;
    /* Prevent content from sticking to scrollbar */
    direction: rtl;
    border: 0px solid;
    border-radius: 25px;
    ;
}

/* Optional Scrollbar Styling */
.introduction::-webkit-scrollbar {
    width: 8px;
    background-color: rgba(211, 211, 211, 0);
    border-radius: 100px;
}

.introduction::-webkit-scrollbar-thumb {
    background-color: #51D3FF;
    border-radius: 100px;
    box-shadow: inset 0px -3em #00B0EB;
    height: 3em;
}

.introduction::-webkit-scrollbar-thumb:active {
    background-color: #FFC300;
    box-shadow: inset 0px -5em #FF5733;
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
}

.introduction::-webkit-scrollbar-thumb:hover {
    cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
}

.introduction>* {
    direction: ltr;
}

/* h2 {
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
}

h3 {
    text-shadow: 0px 4px 5px rgba(0, 0, 0, 0.25);
    color: rgb(99, 99, 99);
} */

.cards {
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    justify-content: start;
    align-content: center;
    animation: appear linear;
    gap: 2vw;
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
    flex-wrap: wrap;
}

.card1 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}


.html_logo {
    width: 3.5vw;
    height: 8.2vh;
    background-image: url("html-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.html_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

.card2 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.css_logo {
    width: 3.5vw;
    height: 8.2vh;
    background-image: url("css-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.css_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

.card3 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.cpp_logo {
    width: 3.5vw;
    height: 7.5vh;
    background-image: url("cpp_trans.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.cpp_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

.card6 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.c_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("c_logo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.c_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

.cards2 {
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    justify-content: start;
    gap: 2vw;
    align-content: center;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
}

.card4 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}


.dart_logo {
    width: 4vw;
    height: 7.5vh;
    background-image: url("Dart_logo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.dart_name {
    font-size: .9rem;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

.card5 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.flutter_logo {
    width: 3.5vw;
    height: 7.5vh;
    background-image: url("flutter_logo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.flutter_name {
    font-size: .78em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 5.2em;
}

.card7 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.python_logo {
    width: 4.2vw;
    height: 8vh;
    background-image: url("python-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.python_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

@keyframes rotateSun {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

body::before {
    content: "";
    position: absolute;
    top: -150px;
    right: -150px;
    width: 300px;
    height: 300px;
    background: conic-gradient(from 0deg,
            #FFC300,
            #FFD700,
            #FFA500,
            #FFC300);
    border-radius: 50%;
    box-shadow:
        0 0 80px 50px rgba(255, 195, 0, 0.3),
        0 0 120px 90px rgba(255, 200, 0, 0.2),
        0 0 180px 130px rgba(255, 170, 0, 0.15);
    pointer-events: none;
    z-index: -1;

    animation: rotateSun 6s linear infinite;
}

p {
    font-size: 1.25em;
}

@keyframes appear {
    from {
        opacity: 0;
        scale: 0.5;
    }

    to {
        opacity: 1;
        scale: 1;
    }

}

.card8 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}



.js_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("js-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}
.ts_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("typescript-logo-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.js_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}
.ts_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

.card9 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}



.react_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("react-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.react_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}
.card10 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}


.node_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("node-js-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.node_name {
    font-size: .9em;
    color: #333;
    font-weight: 600;
    text-align: center;
    margin-top: 4.5em;
}

.cards3 {
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    justify-content: start;
    gap: 2vw;
    align-content: center;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
}
.cards4 {
    display: flex;
    flex-direction: row;
    /* justify-content: center; */
    justify-content: start;
    gap: 2vw;
    align-content: center;
    animation: appear linear;
    animation-timeline: view();
    animation-range: entry 0 cover 30%;
}


.card13 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.ae_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("adobe-after-effects-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.ae_name {
    font-size: 0.8em;
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 3.5em;
}

.card10 {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    /* align-items: center; */
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}


.pr_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("figma_logo.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.pr_name {
    font-size: 0.85em;
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 4em;
}

.card11 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.express_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("express-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}
.express_name {
    font-size: 0.85em;
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 4.75em;
}
.next_logo {
    width: 60px;
    height: 60px;
    background-image: url("next-dot-js-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}
.nextjs_name {
    font-size: 0.85em;
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 4.75em;
}
.card16 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}


.mongo_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("mongo-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}
.mongo_name {
    font-size: 0.85em;
    font-weight: 600;
    color: #333;
    width: fit-content;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 4.75em;
}
.firebase_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("firebase-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}
.firebase_name {
    font-size: 0.85em;
    font-weight: 600;
    color: #333;
    width: fit-content;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 4.75em;
}

.ps_logo {
    width: 4.5vw;
    height: 8vh;
    background-image: url("photoshop-cc-logo-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.ps_name {
    font-size: 0.75em;
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 5em;
}

.card12 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: start;
    width: 10vw;
    height: 20.5vh;
    border: 2px dashed #51D3FF;
    border-radius: 25px;
    /* box-shadow: -11px 11px 16.6px rgba(0, 0, 0, 0.3); */
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}


.blender_logo {
    width: 4em;
    height: 4em;
    background-image: url("blender-svgrepo-com.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 1.5em;
}

.blender_name {
    font-size: 0.8em;
    font-weight: 600;
    color: #333;
    width: 100%;
    text-align: center;
    line-height: 1.5em;
    white-space: normal;
    word-wrap: break-word;
    margin-top: 4.5em;
}

.abt_me_sec:hover {
    transition-duration: 0.5s;
    transition-timing-function: ease in;
    background-color: rgb(244, 243, 243, 0.5);
    backdrop-filter: blur(2px);
    border-top: 1px solid rgba (255, 255, 255, 0.4);
    border-left: 1px solid rgba (255, 255, 255, 0.4);
    /* background-color: rgba (255,255,255,0.4); */
    border-radius: 25px;
    box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
}

.abt_me_sec {
    padding: 2vw;
    transition-duration: 0.5s;
    transition-timing-function: ease in;
    
}

.skills_sec:hover {
    transition-duration: 0.5s;
    transition-timing-function: ease in;
    background-color: rgb(244, 243, 243, 0.5);
    backdrop-filter: blur(2px);
    border-top: 1px solid rgba (255, 255, 255, 0.4);
    border-left: 1px solid rgba (255, 255, 255, 0.4);
    /* background-color: rgba (255,255,255,0.4); */
    border-radius: 25px;
    box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
}

.skills_sec {
    padding: 2vw;
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.proj_sec {
    padding: 2vw;
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.proj_sec:hover {
    transition-duration: 0.5s;
    transition-timing-function: ease in;
    background-color: rgb(244, 243, 243, 0.5);
    backdrop-filter: blur(2px);
    border-top: 1px solid rgba (255, 255, 255, 0.4);
    border-left: 1px solid rgba (255, 255, 255, 0.4);
    /* background-color: rgba (255,255,255,0.4); */
    border-radius: 25px;
    box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
}

.con_sec {
    padding: 2vw;
    transition-duration: 0.5s;
    transition-timing-function: ease in;
}

.con_sec:hover {
    transition-duration: 0.5s;
    transition-timing-function: ease in;
    background-color: rgb(244, 243, 243, 0.5);
    backdrop-filter: blur(2px);
    border-top: 1px solid rgba (255, 255, 255, 0.4);
    border-left: 1px solid rgba (255, 255, 255, 0.4);
    /* background-color: rgba (255,255,255,0.4); */
    border-radius: 25px;
    box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
}

a {
    color: #007acc;
    /* Deep blue for good visibility */
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid transparent;
    transition: color 0.3s ease, border-bottom 0.3s ease;
}

a:hover {
    color: #005f99;
    /* Slightly darker blue on hover */
    border-bottom: 1px solid #007acc;
}

html {
    scroll-behavior: smooth;
}

.mobile_info_skills {
    display: none;
}

.space_removable2 {
    display: none;
}
hr
{
    width: 97.5%;
    height: 1px;
    background-color: transparent;
    border-top: 2px dotted #51D3FF;
    border-bottom: 0px;
    border-left: 0px;
    border-right: 0px;
    margin: 1em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;


}

@media (max-width:1050px) {
    /* .mobile-logo
    {
        display: flex ;
        width: 1.5rem;
        height: 1.5rem;
    } */
    .tech-stack-div
    {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }
    .sidebar {
        width: 90vw;
        height: 12vh;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        transition-duration: .5s;
        transition-timing-function: ease in;
        background-color: rgb(244, 243, 243, 0.5);
        backdrop-filter: blur(2px);
        border-top: 1px solid rgba (255, 255, 255, 0.4);
        border-left: 1px solid rgba (255, 255, 255, 0.4);
        border-radius: 25px;
        box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
        z-index: 1000;
        top: 75vh;
        left: 1vw;
        padding: 0 2vw 0 2vw;
    }

    .sidebar:hover {
        width: 95vw;
        height: 13vh;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        transition-duration: .5s;
        transition-timing-function: ease in;
        left: 0vw;
        padding: 0;
        /* top: 85vh; */
    }

    .dp {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        /* margin-left: em; */
        /* margin-top: em; */
    }

    .dp:hover {
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        /* margin-left: em; */
        /* margin-top: em; */
    }

    .about_me,
    .skills,
    .projects,
    .contact_me {
        margin-left: 1vw;
        font-size: 1.2em;
        font-weight: 600;
        margin-top: .1em;
        /* display: none; */
        /* color: #333; */
    }

    .max_but,
    .min_but,
    .nav_buttons {
        height: 0;
        width: 0;
    }

    .x_logo,
    .github_logo,
    .linkedin_logo {
        width: 15px;
        height: 15px;
        margin-top: .3em;
        /* margin-inline-start: 0.2em; */
    }

    .x_logo:hover,
    .github_logo:hover,
    .linkedin_logo:hover {
        width: 18px;
        height: 18px;
        margin-top: .3em;
        /* margin-inline-start: 0.2em; */
    }

    .main_body {
        width: 100vw;
        margin-top: 0em;
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 5vw 0 0;
        overflow-y: auto;
        backdrop-filter: blur(.4px);
    }

    .name {
        font-size: 2em;
        text-align: center;
        margin-right: 0;
        margin-top: 5vh;
    }

    .degree {
        font-size: 1.2em;
        text-align: center;
        margin-right: 0;
        /* margin-top: em; */
        position: relative;
    }

    .card1,
    .card2,
    .card3,
    .card4,
    .card5,
    .card6,
    .card7,
    .card8,
    .card9,
    .card10,
    .card11,
    .card12,
    .card13,
    .card14,
    .card15,
    .card16 {
        display: none;
        /* gap: 15em; */
    }

    .mobile_info_skills {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 97%;
        padding: .5em;
        gap: 1vw;
        font-weight: 600;
        color: #333;
        border: 2px dashed #51D3FF;
        border-radius: 20px;
        margin-bottom: 1em;
        transition-duration: 0.5s;
        transition-timing-function: ease in;
        flex-wrap: wrap;
        text-align: center;
    }

    .mobile_info_skills:hover {
        transition-duration: 0.5s;
        transition-timing-function: ease in;
        background-color: rgb(244, 243, 243, 0.5);
        backdrop-filter: blur(2px);
        border-top: 1px solid rgba (255, 255, 255, 0.4);
        border-left: 1px solid rgba (255, 255, 255, 0.4);
        /* background-color: rgba (255,255,255,0.4); */
        border-radius: 25px;
        box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
    }

    body::before {
        display: none;
    }

    body {
        overflow-y: auto;
    }

    .space_removable {
        display: none;
    }

    .space_removable2 {
        display:block;
    }

}

@media screen and (max-width:500px) {
    .space_removable {
        display: none;
    }

    .sidebar {
        width: 90vw;
        height: 7vh;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        transition-duration: .5s;
        transition-timing-function: ease in;
        background-color: rgb(244, 243, 243, 0.5);
        backdrop-filter: blur(2px);
        border-top: 1px solid rgba (255, 255, 255, 0.4);
        border-left: 1px solid rgba (255, 255, 255, 0.4);
        border-radius: 25px;
        box-shadow: -5px 5px 1px rgba(0, 0, 0, 0.089);
        z-index: 1000;
        top: 75vh;
        left: 1vw;
        padding: 0 2vw 0 2vw;
    }
    .tech-stack-div
    {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5em;
    }

    .sidebar:hover {
        width: 95vw;
        height: 7vh;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        position: fixed;
        transition-duration: .5s;
        transition-timing-function: ease in;
        left: 0vw;
        /* left: 1vw; */
        padding: 0 0vw 0 0vw;

    }

    .about_me,
    .skills,
    .projects,
    .contact_me {
        margin-left: 1vw;
        font-size: .85em;
        font-weight: 600;
        margin-top: .1em;
        /* color: #333; */
    }

    .about_me:hover,
    .skills:hover,
    .projects:hover,
    .contact_me:hover {
        margin-left: 1vw;
        font-size: .9em;
        font-weight: 600;
        margin-top: .1em;
        /* color: #333; */
    }

    body {
        overflow-x: hidden;
        overflow-y: auto;
        font-size: .8em;
        width: 100vw;
        height: 100vh;
    }

    .degree {
        font-size: 1em;
        text-align: center;
        margin-right: 0;
        margin-top: .5em;
        margin-left: 1vw;

    }

    .name {
        font-size: 2em;
        text-align: center;
        margin-right: 0;
        margin-top: 5vh;
        margin-left: 1vw;
    }

    .x_logo,
    .github_logo,
    .linkedin_logo {
        width: 15px;
        height: 15px;
        margin-top: .3em;
        /* margin-inline-start: 0.2em; */
    }

    .x_logo:hover,
    .github_logo:hover,
    .linkedin_logo:hover {
        width: 18px;
        height: 18px;
        margin-top: .3em;
        /* margin-inline-start: 0.2em; */
    }

    .dp {
        width: 10vw;
        height: 10vw;
        border-radius: 50%;
        /* margin-left: em; */
        /* margin-top: em; */
    }

    .dp:hover {
        width: 12vw;
        height: 12vw;
        border-radius: 50%;
        /* margin-left: em; */
        /* margin-top: em; */
    }

    body::before {
        display: none;
    }

    .main_body {
        width: 100vw;
        /* margin-top: ; */
        margin-left: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 5vw 0 0;
        overflow-y: auto;
        backdrop-filter: blur(.4px);
    }

    .introduction::-webkit-scrollbar {
        width: 8px;
        background-color: rgba(211, 211, 211, 0);
        border-radius: 100px;
    }

    .introduction::-webkit-scrollbar-thumb {
        background-color: #51D3FF;
        border-radius: 100px;
        box-shadow: inset 0px -3em #00B0EB;
        height: 3em;
    }

    .introduction::-webkit-scrollbar-thumb:active {
        background-color: #FFC300;
        box-shadow: inset 0px -5em #FF5733;
        cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    }

    .introduction::-webkit-scrollbar-thumb:hover {
        cursor: url('icons8-computer-mouse-20.png') 0 0, auto;
    }

    .introduction>* {
        direction: ltr;
    }
    .space_removable2 {
        display:block;
    }

}