* {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: Arial, Helvetica, sans-serif;
            color: #222;
            background: #fff;
        }

        .layout {
            display: flex;
            min-height: 100vh;
        }

        /* LEFT SIDEBAR */

        .sidebar {
            width: 280px;
            min-height: 100vh;
            padding: 70px 45px;
            position: fixed;
            left: 0;
            top: 0;
            background: white;
            display: flex;
            flex-direction: column;
        }

        .name {
                    color: #222;
    text-decoration: none;
                    }
            font-size: 25px;
            font-weight: 700;
            line-height: 1.05;
            letter-spacing: -0.5px;
            margin-bottom: 65px;
        }

        .menu-title {
            font-size: 14px;
            font-weight: 700;
            margin-bottom: 22px;
            letter-spacing: 0.5px;
        }

        .menu {
            display: flex;
            flex-direction: column;
            gap: 14px;
        }

        .menu a {
            text-decoration: none;
            color: #888;
            font-size: 15px;
            transition: color 0.2s ease;
        }

        .menu a:hover {
            color: #111;
        }

        .bottom-menu {
            margin-top: 45px;
        }
        .social-links {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 45px;
}

.social-links a {
    color: #999;
    text-decoration: none;
    font-size: 17px;
    line-height: 1;
}

.social-links a:hover {
    color: #111;
}

.social-links svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
}

        /* MAIN GALLERY */

        .main {
            margin-left: 280px;
            width: calc(100% - 280px);
        }

        .gallery {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 2px;
        }

        .project {
            min-height: 430px;
            position: relative;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .project:nth-child(2),
        .project:nth-child(5) {
            min-height: 600px;
        }

        .project:nth-child(3),
        .project:nth-child(6) {
            min-height: 350px;
        }

        .project-inner {
            width: 100%;
            height: 100%;
            min-height: inherit;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            transition: transform 0.5s ease;
        }

        .project:hover .project-inner {
            transform: scale(1.03);
        }

        .project-title {
            background: rgba(255, 255, 255, 0.88);
        padding: 25px 35px;
        font-size: 30px;
        font-weight: 400;
        letter-spacing: -1px;
        color: #222;
        text-decoration: none;
    }

    .project {
        color: #222;
        text-decoration: none;
        }

        /* Temporary photo-like placeholders */

        .project-1 {
            background-image: url("images/veravice-2.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .project-2 {
            background-image: url("images/VV-1.jpg");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        .project-3 {
    background-image: url("images/projekteerijate-maja-07.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

        .project-4 {
            background: linear-gradient(135deg, #9bcbd0, #d8ecec);
        }

        .project-5 {
            background: linear-gradient(135deg, #5f6869, #c9ceca);
        }

        .project-6 {
            background: linear-gradient(135deg, #ded9c7, #aaa390);
        }

        /* MOBILE */

        @media (max-width: 800px) {

            .layout {
                display: block;
            }

            .sidebar {
                position: relative;
                width: 100%;
                min-height: auto;
                padding: 30px 25px;
            }

            .name {
                margin-bottom: 30px;
            }

            .menu {
                gap: 10px;
            }

            .bottom-menu {
                margin-top: 25px;
            }

            .main {
                margin-left: 0;
                width: 100%;
            }

            .gallery {
                grid-template-columns: 1fr;
            }

            .project,
            .project:nth-child(2),
            .project:nth-child(3),
            .project:nth-child(5),
            .project:nth-child(6) {
                min-height: 420px;
            }
        }
  .project-page {
            margin-left: 280px;
            padding: 70px 6%;
        }

        .project-header {
            margin-bottom: 60px;
        }

        .project-header h1 {
            font-size: 34px;
            font-weight: 400;
            margin-bottom: 15px;
        }

        .project-header p {
            color: #888;
            font-size: 15px;
        }

        .photos {
            max-width: 1100px;
        }

        .photos img {
            display: block;
            width: 100%;
            height: auto;
            margin-bottom: 30px;
                    
            .project-page {
    margin-left: 0;
    padding: 40px 25px;
}
        }