@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    padding: 0;
    overflow: auto;
}

.topnav {
    background-color: #ffffff;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 35px;
    margin-top: 20px;
}

.topnav .left {
    flex: 1;
}

.topnav .left a {
    float: left;
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-weight: bold;
    font-size: 28px;
    letter-spacing: 2px;
}

.topnav .right {
    display: flex;
    justify-content: flex-end;
    flex: 2;
}

.topnav .right a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    margin-left: 30px;
    font-size: 22px;
    letter-spacing: 1px;
}

.topnav a:hover {
    color: black;
    font-weight: bold;
}

.topnav a.active {
    color: black;
    font-weight: bold;
}

h1 {
    text-align: left;
    margin-left: 52px;
    margin-top: 150px;
    font-size: 50px;
    letter-spacing: 2px;
    font-weight: 550;
}

p {
    margin-left: 52px;
    font-size: 25px;
    line-height: 1.6;
    letter-spacing: 1px;
    font-weight: bold;
}

.p1 {
    font-size: 22px;
    line-height: 1.6;
    letter-spacing: 1px;
    font-weight: lighter;
}

.about-me-container {
    margin-bottom: 40px; /* Adjust the value as needed */
    padding-bottom: 40px; /* Adjust the value as needed */
    padding-right: 50px;
}

.gallery-container {
    margin-left: 0px; /* Pushes gallery away from the left */
    overflow: hidden;
    width: calc(100% - 60px); 
}

.gallery {
    display: flex;
    overflow-x: scroll; /* Maintain scroll functionality */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on touch devices */
    padding-right: 10px; /* Add space at the end */
    margin-left: 52px; /* Align with heading */
}

/* Hide scrollbar for Chrome, Safari and Opera */
.gallery::-webkit-scrollbar {
    display: none; /* Hide scrollbar */
}

/* Hide scrollbar for IE, Edge */
.gallery {
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

/* Hide scrollbar for Firefox */
.gallery {
    scrollbar-width: none; /* Hide scrollbar for Firefox */
}

.gallery a {
    flex: 0 0 auto;
    margin-right: 50px; /* Space between images */
    overflow: hidden;
}

.gallery img {
    border-radius: 20px; /* Rounded corners */
    width: auto;
    height: auto; /* Maintain aspect ratio */
    max-width: 100%; /* Ensure images fit within their container */
    object-fit: cover;
    transition: transform 0.3s ease; /* Smooth scaling effect on hover */
}

.gallery img:hover {
    transform: scale(0.95); /* Zoom effect on hover */
}

p .link {
    color: black; /* Same color as surrounding text */
    text-decoration: none; /* Remove underline */
    font-weight: bold; /* Optional: Match font-weight if needed */
}

p .link:hover {
    text-decoration: underline; /* Add underline on hover for better visibility */
    color: #333; /* Optional: Change color on hover for better user experience */
}

.photos-container {
    margin-left: 52px; /* Align with heading */
    margin-top: 50px; /* Adjust as needed */
    margin-bottom: 50px; /* Adjust as needed */
}

.photos-container h1 {
    text-align: left;
    margin-left: 0; /* Align with other content */
    margin-top: 0; /* Adjust as needed */
    font-size: 80px; /* Match the font size of h1 */
    letter-spacing: 2px; /* Match letter-spacing */
    font-weight: lighter; /* Match font weight */
}

.photo-wrapper {
    position: relative;
    display: inline-block;
    margin-right: 0px; /* Space between images */
}

.photo-wrapper img {
    border-radius: 20px; /* Rounded corners */
   /* object-fit: cover;*/
    transition: transform 0.3s ease; /* Smooth zoom effect */
}

.photo-wrapper img:hover {
    transform: scale(0.95); /* Slight zoom effect on hover */
}

.personalgallery-container {
    overflow: hidden;
    margin-left: -52px;
    width: calc(100% - 52px); /* Adjust width to match container */
}

.gallery {
    display: flex;
    overflow-x: scroll; /* Maintain scroll functionality */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* For smooth scrolling on touch devices */
    padding-right: 10px; /* Add space at the end */
    margin-left: 52px; /* Align with heading */
}

/* Hide scrollbar for all browsers */
.gallery::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE and Edge */
.gallery {
    -ms-overflow-style: none;
}

/* Hide scrollbar for Firefox */
.gallery {
    scrollbar-width: none;
}

/* Modal container */
.modal {
    display: none; /* Hide by default */
    position: fixed;
    z-index: 1000; /* Ensure it is on top of other content */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scroll if content is larger than viewport */
    background-color: rgba(0, 0, 0, 0.8); /* Dark background */
}

/* Modal content */
.modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally and vertically */
    width: 500px; /* Fixed width */
    height: 600px; /* Fixed height */
    background: #fff;
    border-radius: 20px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Optional: shadow */
    padding: 20px;
    box-sizing: border-box;
    overflow: hidden; /* Hide overflow to maintain fixed size */
}


/*Modal image*/
.modal-image {
    width: 400px;
    height: 450px;
    max-height: 500px; /* Limit height of the image */
    border-radius: 20px; /* Adjust rounded corners for image */
    /* margin-bottom: 20px; Space between image and description */
    margin: 0 auto; /* Center the image horizontally */
    display: block;
    margin-top: 30px;
    object-fit: cover; /* Ensure image covers the area without distortion */
}

/* Modal description */
.modal-description {
    font-size: 16px; /* Smaller font size */
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    letter-spacing: 1px;
    color: black; /* Dark text for better readability */
    overflow: hidden; /* Hide overflow to maintain fixed size */
    margin-top: 30px; /* Space between the image and description */
}

/* Close button styling */
.close {
    position: absolute;
    top: 15px; /* Adjust position */
    right: 15px; /* Adjust position */
    color: #000;
    font-size: 30px; /* Adjust font size */
    font-weight: bold;
    cursor: pointer;
}

/* Navigation buttons */
.prev, .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 12px; /* Adjust padding */
    margin-top: -20px; /* Adjust margin */
    color: #000;
    font-weight: lighter;
    font-size: 16px; /* Adjust font size */
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
}

/* Next button (right) */
.next {
    right: 10px; /* Distance from the right edge */
    border-radius: 3px 0 0 3px; /* Round corners on the left side */
}

/* Previous button (left) */
.prev {
    left: 10px; /* Distance from the left edge */
    border-radius: 3px 3px 0 0; /* Round corners on the right side */
}

.prev:hover, .next:hover {
    font-weight: 300px;
}

/*Project Pages*/
/* Header image container */
.header {
    display: flex;
    justify-content: center; /* Center horizontally */
    margin-top: 100px; /* Distance from the top */
}

/* Image styling */
.header img {
    border-radius: 20px;
    max-height: 400px; /* Maximum height of the image */
    width: auto; /* Maintain aspect ratio */
    display: block; /* Removes any extra space below the image */
}

.projectsubheading {
    font-size: 50px;
    font-family: 'Open Sans', sans-serif;
    margin-left: 85px;
    margin-top: 50px;
}

.normal-text {
    font-weight: normal; /* Makes the text unbolded */
}

.projecttext {
    font-size: 20px;
    font-family: 'Open Sans', sans-serif;
    margin-left: 135px;
    margin-right: 120px;
    font-weight: lighter;
}

.projecttext b, .projecttext strong {
    font-weight: bold;
  }

.projectgallery-container {
    overflow: hidden;
    margin-left: 30px;
    width: calc(100% - 52px); /* Adjust width to match container */
}

.project-container {
    margin-left: 52px; /* Align with heading */
    margin-top: 50px; /* Adjust as needed */
    margin-right: 90px;
    margin-bottom: 50px; /* Adjust as needed */
}