/* Reset & Base */
body, html {
    margin: 0;
    padding: 0;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #333;
    background: #fff;
    line-height: 1.6;
    font-style: italic; /* All body text italic */
}

a { text-decoration: none; color: inherit; }
img { display: block; }

/* Sidebar */
#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 250px;
    height: 100%;
    background: #111;
    color: #fff;
    overflow-y: auto;
    padding: 20px;
    z-index: 1000;
}

#header .top #logo {
    text-align: center;
    margin-bottom: 40px;
}

#header .top #logo img {
    width: 85%;
    height: auto;
    border-radius: 5px;
    object-fit: cover;
    margin-bottom: 15px;
}

#header .top #logo h1 { font-size: 1.6rem; margin: 5px 0; text-align: center; }
#header .top #logo p { font-size: 0.95rem; color: #ccc; text-align: center; }

/* Navigation */
#nav ul { list-style: none; padding: 0; }
#nav ul li { margin: 15px 0; }
#nav ul li a { color: #fff; font-weight: bold; display: block; padding: 8px; transition: background 0.3s; text-align: center; }
#nav ul li a:hover { background: #222; border-radius: 5px; }

/* Social Icons Horizontal */
.social-icons {
    display: flex;
    justify-content: center; /* centered horizontally */
    gap: 60px; /* spacing */
    margin-top: 30px;
}

.social-icons li { list-style: none; }
.social-icons li a { color: #fff; font-size: 0.8em; transition: color 0.3s; }
.social-icons li a:hover { color: #1da1f2; }

/* Main Content */
#main { margin-left: 250px; padding: 50px; }
section { padding: 60px 0; border-bottom: 1px solid #eee; }
section header { margin-bottom: 2em; text-align: center; } /* headers centered */
section header h2 { font-size: 3.6rem; margin-bottom: 15px; text-align: center; } /* doubled size */
section p { font-size: 1rem; margin-bottom: 20px; }

/* Uniform Images */
.image-row img,
.fit-image,
#header .top #logo img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    display: block;
    margin: 0 auto;
}

/* Image row container */
.image-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; }

/* Buttons */
.contact-button {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 10px 20px;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
}
.contact-button:hover { background: #444; }

/* Mobile Menu Toggle */
#menu-toggle {
    display: none;
    position: fixed;
    top: 15px;
    left: 15px;
    z-index: 1101;
    color: #fff;
    font-size: 1.8rem;
    cursor: pointer;
}

/* Responsive Sidebar & Mobile */
@media screen and (max-width: 1024px) {
    #header { width: 200px; }
    #main { margin-left: 200px; padding: 30px 15px; }
    .image-row img { width: 100%; height: auto; }
}

@media screen and (max-width: 768px) {
    #menu-toggle { display: block; }
    #header {
        position: fixed;
        top: 0;
        left: -100%;
        width: 100%;
        height: 100%;
        background: #111;
        padding: 50px 20px;
        z-index: 1100;
        transition: left 0.3s ease-in-out;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }
    #header.active { left: 0; }

    #nav ul li a { font-size: 1.5rem; }
    .social-icons li a { font-size: 1.5rem; }
    #main { margin-left: 0; padding: 20px 10px; }
    .image-row img,
    .fit-image,
    #header .top #logo img { width: 90%; height: auto; }
}