/* General styles */
body {
    margin: 0;
    /* font-family: 'Roboto Mono', monospace; */
    font-family: 'Fira Sans', sans-serif;
    background-color: rgb(255, 255, 255);
    color: black;
    line-height: 1.6;
    max-width: 800px; /* Max width for the content */
    margin-left: auto;
    margin-right: auto; /* Center the body content */
    padding: 20px; /* Optional padding for extra spacing */
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1;
}

/* Separator line */
.separator {
    width: 100vw; /* Full width of the viewport */
    margin-left: calc(-50vw + 50%); /* Center the line */
    border: none;
    border-top: 1px solid black; /* Adjust the color and thickness as needed */
}

/* Header */
header {
    background-color: rgb(255, 255, 255);  /* Black bar at the top */
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    padding: 20px 0;
    text-align: center;
    width: 100%; /* Full width of the page */
}

header a {
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    text-decoration: none;
    margin: 0 10px;
    display: inline-block;
    text-align: center;
}

header i {
    font-size: 24px; /* Adjust the size of the icons */
    margin-bottom: 5px; /* Space between the icon and the text */
}



#name {
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    margin: 0;
    font-size: 2.5em;
}


#name-link {
    text-decoration: none; /* Remove underline */
    color: inherit; /* Inherit the color from the parent element */
}

/* About Section */
#about {
    text-align: left;  /* Align About section text to the left */
    padding: 20px;
    max-width: 800px; /* Max width for the About section */
    margin: 0 auto; /* Center the About section */
}

/* Hardware Projects Section */
#hardware-projects {
    text-align: left;  /* Align Hardware Projects section text to the left */
    padding: 20px;
    max-width: 800px; /* Max width for the Hardware Projects section */
    margin: 0 auto; /* Center the Hardware Projects section */
}

/* About heading */
.about-heading {
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    font-size: 2em; /* Adjust the size as needed */
    margin: 20px 0; /* Ensure consistent margins */
    padding: 0; /* Remove any padding */
}


/* Section Heading */
.section-heading {
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    font-size: 2em; /* Adjust the size as needed */
    margin: 20px 0; /* Ensure consistent margins */
    padding: 0; /* Remove any padding */
}

/* Section Heading */
.section2-heading {
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    font-size: 2em; /* Adjust the size as needed */
    margin: 20px 25px; /* Ensure consistent margins */
    padding: 0; /* Remove any padding */
}

.section-heading-indv {
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    font-size: 1.5em; 
    margin: 20px 0; /* Ensure consistent margins */
    padding: 0; /* Remove any padding */
}

/* Centered Image */
.centered-image {
    display: block;
    margin: 20px auto; /* Center the image */
    max-width: 500px; /* Ensure the image is responsive */
    height: auto;
    border-radius: 5px;
}

.centered-image2 {
    display: block;
    margin: 20px auto; /* Center the image */
    max-width: 300px; /* Ensure the image is responsive */
    height: auto;
    border-radius: 5px;
}

.centered-image3 {
    display: block;
    margin: 20px auto; /* Center the image */
    max-width: 425px; /* Ensure the image is responsive */
    height: auto;
    border-radius: 5px;
}

.centered-image4 {
    display: block;
    margin: 20px auto; /* Center the image */
    max-width: 800px; /* Ensure the image is responsive */
    height: auto;
    border-radius: 5px;
}

.centered-image5 {
    display: block;
    margin: 20px auto; /* Center the image */
    max-width: 360px; /* Ensure the image is responsive */
    height: auto;
    border-radius: 5px;
}

/* Image Title */
.image-title {
    text-align: center;
    font-size: 1em;
    color: black;
    margin-top: 10px;
}

.profile-pic {
    width: 200px;
    height: 267px;
    border-radius: 30%;
    display: block;
    margin: 20px auto;  /* Center the profile picture */
    object-fit: cover; /* Crop to fit dimensions */
    object-position: center; /* Center the crop */
}

/* Projects Section */
#projects {
    padding: 20px;
    text-align: center;
    max-width: 800px; /* Max width for the Projects section */
    margin: 0 auto; /* Center the Projects section */
}

/* Project Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

/* Project Grid 2 */
.project-grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    padding: 20px;
}

/* Image Row */
.image-row {
    display: flex;
    justify-content: space-around; /* Space out the images evenly */
    align-items: flex-end; /* Align items to the top */
    gap: 20px;
    margin: 20px 0; /* Add some margin for spacing */
}


/* Project Item */
.project {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: flex-end; /* Center items vertically */
    text-align: center; /* Center text */
    max-width: 300px; /* Set the maximum width */
    max-height: 400px; /* Set the maximum height */
    overflow: hidden; /* Hide overflow content */
}

.project img {
    width: 100%;
    height:auto;
    border-radius: 5px;
    transition: transform 0.3s;
}

.project img:hover {
    transform: scale(1.05);
}

.project video {
    width: 100%;
    height: auto;
    border-radius: 5px;
    transition: transform 0.3s;
}

.project video:hover {
    transform: scale(1.05);
}

.project p {
    font-weight: bold;
    margin-top: 10px;
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    text-decoration: none;
    text-align: center;
    margin-bottom: 0;
}

/* Position the last project in the second column */
.last-project {
    grid-column: 2;
}

.last-project-centered {
    grid-column: 1 / -1; /* Span across all columns */
    justify-self: center; /* Center the item */
}

.project_exp {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center items horizontally */
    justify-content: flex-end; /* Center items vertically */
    text-align: center; /* Center text */
    max-width: 500px; /* Set the maximum width */
    max-height: 500px; /* Set the maximum height */
    overflow: hidden; /* Hide overflow content */
}

/* Footer */
footer {
    background-color: rgb(255, 255, 255);  /* Black bar at the bottom */
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103); 
    padding: 10px 0;
    text-align: center;
    width: 100vw; /* Full width of the viewport */
    position: relative; /* Ensure it spans the entire width */
    left: 50%;
    transform: translateX(-50%);
}

footer a {
    /* color: rgb(3, 126, 122); */
    color: rgb(1, 55, 103);
    text-decoration: none;
    margin: 0 10px;
    display: inline-block;
    text-align: center;
}

footer i {
    font-size: 24px; /* Adjust the size of the icons */
    margin-bottom: 5px; /* Space between the icon and the text */
}


/* Footer name and email */
footer small {
    display: block;
    margin-top: 10px;
    font-size: 1em;
    color: rgb(0, 0, 0);
}