@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    border: none;
    outline: none;
    scroll-behavior: smooth;
    font-family: 'poppins',sans-serif;
    /* Removed invalid properties */
}

:root {
    --primary-color: #007bff;
    --secondary-color: #6c757d;
    --background-dark-color: #10121A;
    --background-dark-grey: #191d28;
    --border-color: #2e344e;
    --background-light-color: #f1f1f1;
    --white-color: #fff;
    --font-light-color: #a4acc4;
    --font-dark-color: #313131;
    --font-dark-color-2: #151515;
    --sidebar-dark-color: #191d28;
    --scrollbar-bg-color: #383838;
    --scrollbar-thump-color: #6b6b6b;
    --scrollbar-track-color: #383838;
}

html {
    font-size: 62.5%;
    overflow-x: hidden;
}

body {
    font-size: 1.6rem;
    background-color: var(--background-dark-color);
    color: var(--font-light-color);
    word-wrap: break-word;
   
}

section {
    min-height: 100vh;
    padding: 1rem 9%;
    margin-bottom: 1rem; /* Add space between sections */
}

.nav-container {
    background-color: var(--border-color);
    top: 0;
    left: 0;
    padding: 2rem 9%;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 100;
    margin: 0 auto;
    width: 100%;
    position: fixed;
}

.profile-icon {
    display: flex;
    align-items: center;
    width: 5.6vw;
    margin-left: -3rem;
}

@media (max-width: 575.98px) {
    .profile-icon {
        width: 10vw; /* Adjust width for smaller screens */
        margin-left: 0; /* Reset margin for better alignment */
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .profile-icon {
        width: 8vw; /* Adjust width for tablets */
        margin-left: -1rem; /* Adjust margin for alignment */
    }
}

.logo {
    color: var(--font-light-color);
    font-size: .5rem;
    font-weight: 600;
    cursor: default;
    width: 20vw;
    display: block;
}

.nav-links a{
    font-size: 1.7rem;
    color: var(--white-color);
    margin-left: 4rem; 
    font-weight: 600;
    cursor: default; 
    transition: .9s ease-in-out;
    margin-left: 3rem;
}

.nav-links a:hover {
    color: var(--primary-color);  
      
}

.nav-links a.active {
    color: var(--primary-color);    
}

#menu-icon {
    font-size: 3.6rem;
    color: var(--white-color);
    display: none;
}

.home-section {
    display: flex;
    align-items: center;
    justify-content: center;
    
     
    
  
}

/* 
 * This section styles the <h3> elements within the .Home-content class.
 * It sets the font size to 3.2rem and the font weight to 700 (bold).
 */
.Home-content h3{
    font-size: 3.2rem;
    font-weight: 700;

}

.Home-content h3:nth-of-type(2){
    margin-bottom: 2rem;
}

span {
    color: var(--primary-color);
   
    font-family: monospace;
    overflow: hidden;
    animation: 
        typing 2s steps(27),
        cursor .4s step-end infinite;
}


@keyframes cursor {
    50% {
        background-color:transparent;
    }
}

@keyframes typing {
    0% {
        width: 0;
        overflow: hidden;
    }
    100% {
        width: 100%;
        overflow: hidden;
    }
}

.Home-content h1{
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 1.3;
}

 .Home-content {
    font-size: 1.6rem;
    font-weight: 400;
    color: var(--font-light-color);
    margin: 1.5rem 0 2.5rem;
    overflow-wrap: break-word;
    text-align: center;
    line-height: 1.6;
  
    
} 



.About h2 {
    color: var(--primary-color);
    text-align: center;
    font-size: 2.4rem;
    font-weight: 700;
    margin-bottom: 2rem;
    display: block; /* Ensure it is displayed as a block element */
    margin-top: 2rem; /* Add some spacing from the top */
}


.mb-4 {
    margin-bottom: 1rem;

    padding: 1rem; /* Add padding for better spacing */
    background-color: var(--background-dark-grey); /* Optional: Add a background color */
    border: 0.1rem solid var(--border-color); /* Optional: Add a border */
    border-radius: 0.5rem; /* Optional: Add rounded corners */
    max-width: 90%; /* Ensure it adjusts size responsively */
    text-align: left; /* Align text to the left */
    box-sizing: border-box; /* Include padding and border in width/height */
    list-style-position: inside; /* Move bullet points inside the border */
}

.work-experience {
    width: 5.6vw;
    margin-left: -5rem;
    display: flex;
    align-items: flex-start; /* Corrected alignment property */
    justify-content: flex-start; /* Corrected justification property */
    gap: 7rem; /* Add space between child elements */
    color: var(--background-light-color);
}

.mb-4 h3 {
    color: var(--secondary-color);
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.mb-4 li {
    
    color: var(--white-color);
    text-align: left;
}

.Home.footer-text {
  
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem; /* Define a height */
    padding: 1rem; /* Add padding for spacing */
    color: var(--white-color); /* Ensure text is visible */
}

.footer-text_About {
    background-image: linear-gradient(to right, var(--primary-color), var(--secondary-color));
    display: flex;
    justify-content: center;
    align-items: center;
    height: 5rem; /* Define a height */
    padding: 1rem; /* Add padding for spacing */
    color: var(--white-color); /* Ensure text is visible */
}

.About-subsection h2 { 
    color: var(--primary-color);
    text-align: center;
   
}

.About h1 { 
    color: var(--primary-color);
    text-align: center;
   
}



.Home-image img {
    width: 10vw;
    border-radius: 10%;
    background: transparent;
    border: .1rem solid var(--primary-color);
    color: var(--font-light-color);
    transition: .9s ease-in-out;
    justify-content: center;
    position: absolute;
    position: relative; /* Ensure it stays within the normal document flow */
    margin: 3% auto 0; /* Center horizontally and add margin from the top */
    display: block; /* Ensure the image behaves as a block-level element */
}


.main-image {
    justify-content: center;
    align-items: center;
}

.Social-media a{
    display: inline-flex;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
    width: 4rem;
    height: 4rem;
    background: transparent;
    border: .2rem solid var(--primary-color);
    border-radius: 50%;
    font-size: 2rem;
    color: var(--font-light-color);
    margin: 3rem 1.5rem 3rem 0;
    transition: .4s ease-in-out;
   
    
}

.Social-media a:hover {
    background-color: var(--primary-color);
    color: var(--white-color);
    box-shadow: 0 0 1rem var(--primary-color);
}

.projects video-embed {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 5rem;
    position: relative; /* Changed to relative for better responsiveness */
    width: 100%; /* Adjust width to be responsive */
    max-width: 800px; /* Set a maximum width */
    margin: 5rem auto; /* Center horizontally and add top margin */
    aspect-ratio: 16 / 9; /* Maintain aspect ratio for videos */
    overflow: hidden; /* Ensure content doesn't overflow */
}

/* Media Queries for Responsive Design */

/* Extra small devices (phones, less than 576px) */
@media (max-width: 575.98px) {
    html {
        font-size: 50%;
    }

    .nav-container {
        padding: 1rem 5%;
        height: 5rem;
    }

    .nav-links {
        display: none; /* Hide navigation links by default */
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        background-color: var(--background-dark-color);
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        z-index: 99;
    }

    .nav-links.active {
        display: flex; /* Show navigation links when active */
    }

    .nav-links a {
        font-size: 1.4rem;
        margin-left: 0;
    }

    #menu-icon {
        display: block;
        cursor: pointer;
        z-index: 101; /* Ensure it is above other elements */
    }

    .nav-links {
        display: none; /* Hide navigation links by default */
        flex-direction: column;
        align-items: center;
        gap: 1rem;
        background-color: var(--background-dark-color);
        position: absolute;
        top: 5rem;
        left: 0;
        width: 100%;
        z-index: 99;
    }

    .nav-links.active {
        display: flex; /* Show navigation links when active */
    }

    .Home-content h1 {
        font-size: 2.4rem;
    }

    .Home-content h3 {
        font-size: 2.4rem;
    }

    .Home-content {
        font-size: 1.4rem;
        padding: 0 2rem;
    }

    .Home-image img {
        width: 20vw;
    }

    .Social-media a {
        width: 3rem;
        height: 3rem;
        font-size: 1.6rem;
    }
}

/* Small devices (tablets, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    html {
        font-size: 55%;
    }

    .nav-container {
        padding: 1.5rem 7%;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 2rem;
    }

    .nav-links a {
        font-size: 1.5rem;
        margin-left: 0;
    }

    .Home-content h1 {
        font-size: 2.8rem;
    }

    .Home-content h3 {
        font-size: 2.8rem;
    }

    .Home-content {
        font-size: 1.5rem;
    }

    .Home-image img {
        width: 15vw;
    }

    .Social-media a {
        width: 3.5rem;
        height: 3.5rem;
        font-size: 1.8rem;
    }

    .About.mb-4 {
        width: 4rem;
        height: 3.5rem;
        font-size: 1.8rem;
    }
}

/* Medium devices (desktops, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    html {
        font-size: 60%;
    }

    .nav-container {
        padding: 2rem 8%;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 3rem;
    }

    .nav-links a {
        font-size: 1.6rem;
        margin-left: 0;
    }

    .Home-content h1 {
        font-size: 3rem;
    }

    .Home-content h3 {
        font-size: 3rem;
    }

    .Home-content {
        font-size: 1.6rem;
    }

    .Home-image img {
        width: 12vw;
    }

    .Social-media a {
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
    }

    .About.mb-4 {
        width: 4rem;
        height: 3.5rem;
        font-size: 1.8rem;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    html {
        font-size: 62.5%;
    }

    .nav-container {
        padding: 2rem 9%;
    }

    .nav-links {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        gap: 3rem;
    }

    .nav-links a {
        font-size: 1.7rem;
        margin-left: 0;
    }

    .Home-content h1 {
        font-size: 3.2rem;
    }

    .Home-content h3 {
        font-size: 3.2rem;
    }

    .Home-content {
        font-size: 1.6rem;
    }

    .Home-image img {
        width: 10vw;
    }

    .Social-media a {
        width: 4rem;
        height: 4rem;
        font-size: 2rem;
    }
}