/* projects.css */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");
body { font-family: "Nunito", sans-serif; background-color: #d9f9f95f; color: #121212; line-height: 1.6; }
/* header { background: #262F3E; color: #fff; padding: 20px 0; } */
header h1 { margin: 0 0 10px 0; font-size: 28px; }
header a { color: #ffffff; }
header nav ul { display: flex; justify-content: left; padding: 0; }
header nav ul li { list-style: none; margin: 0 15px; }
.container { max-width: 900px; margin: 40px auto; padding: 0 10px; }
.section-title { font-size: 22px; color: #f90; margin-bottom: 20px; font-weight: 700; }
.section-content { background: #fafafa0e; padding: 20px; border-radius: 8px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); margin-bottom: 20px; }
ul { padding-left: 20px; }
ul li { margin-bottom: 10px; }
@media screen and (max-width: 768px) { header h1, header nav ul { text-align: left; } .container { width: 93%; } }
header {
      background: #f90;
      color: #fff;
      padding: 20px 0;
      position: relative; /* Ensure this is set */
    }
    .logo {
      position: absolute;
      top: 6px;
      bottom: 7px; /* Adjusts the image to sit above the bottom border */
      right: 6px;
      padding-right: 0px; /* Adjusts for spacing from the right edge */
      width: 194px; /* Set your desired width */
      height: auto; /* This will maintain the aspect ratio */ 
    }

    @media screen and (max-width: 768px) {
            .logo {
                width: 15%;  /* Smaller width for smaller screens */
                top: 5px; /* Adjust as necessary */
                right: 5px; /* Adjust as necessary */
            }
        }