/* styles.css */
body {
font-family: 'Poppins', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}

.social-links {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  line-height: 50px;
  
}


.social-links img {
width: 30px; /* Adjust size as needed */
margin: 0px 10px; /* Space between icons */


}

.about-me-section {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2rem;
  margin-top: 1rem;
}

.about-text {
  flex: 1 1 60%;
  font-size: 1.1rem;
  line-height: 1.6;
}

.about-photo {
  flex: 1 1 30%;
  text-align: center;
}

.about-photo img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.container {
width: 80%;
margin: auto;
}

header, footer {
background-color: #2f2f2f; /* Dark blue background */
color: white; /* White text */
padding: 20px 0;
text-align: center;
}

.site-header {
position: sticky;
top: 0;
width: 100%;
background-image: url('banner.png'); /* Add your banner image here */
background-size: cover; /* Cover the entire element */
background-position: center center; /* Center the image */
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
justify-content: space-around;
align-items: center;
}

.nav-link {
color: white; /* White text */
text-decoration: none;
padding: 20px 40px; /* Bigger padding to make the links larger */
flex-grow: 1; /* Allow links to take up available space */
}

.nav-link:hover {
background-color: #576d80; /* Slightly lighter blue on hover */
}

main {
padding: 0px 0;
min-height: calc(100vh - 2 * (20px + 20px) - 40px); /* Adjust this calculation based on your header and footer heights */
overflow-y: auto; /* Enable scrolling if content overflows */
max-height: 80vh; /* Set a maximum height to trigger scrolling only when necessary */
}

.language-switch img {
width: 40px; /* Adjust size as needed */
cursor: pointer;
margin-left: 15px; /* Space between language switch images and header text */
}


/* Position the .language-switch div in the top right corner */
.language-switch {
position: absolute;
right: 10px; /* Adjust this value based on your design preferences */
top: 10px;

}

/* Footer Sticky Positioning */
.site-footer {
position: sticky;
bottom: 0;
width: 100%;
padding: 2px;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
width: 95%;
}

header, footer {
padding: 10px 0;
}
.nav-link {
padding: 30px 40px; /* Even bigger padding for mobile screens */
}
  .about-me-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-text,
  .about-photo {
    flex: 1 1 100%;
  }

  .about-text {
    font-size: 1rem;
    text-align: left;
    padding: 0 1rem;
  }
}