/* Reset default margins/paddings */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%; /* Ensures full height */
}

/* Logo styling */
.logo {
    position: absolute;
    top: 90px; /* Adjust to the desired top position */
    left: 50px; /* Adjust to the desired left position */
    width: 150px; /* Adjust the size of the logo */
    height: auto;
}

/* Pro section styling */
.pro {
    background-color: grey;
    color: aliceblue;
    padding: 100px 30px;
    text-align: center;
    width: 100%;
}

/* Pro heading styling */
.pro h1 {
    color: white;
    font-size: 5rem;
    margin-bottom: 20px;
    font-family: 'Times New Roman', Times, serif;
}

/* Images styling */
.images {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 50px;
    padding: 90px;
}

.project {
    position: relative;
    flex: 0 1 calc(33.33% - 40px);
    max-width: calc(33.33% - 40px);
    text-align: center;
}

.project img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    filter: brightness(0.7);
}

/* Default overlay effect */
.project::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(219, 189, 133, 0.395);
    z-index: 1;
}

/* Bottom text in projects */
.project .bottom-text {
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    color: white;
    font-size: 2rem;
    padding: 5px;
    text-align: center;
    font-weight: bold;
    z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 1025px) {
    .pro {
        padding-top: 200px;
    }

    .logo {
        position: absolute;
        top: 10%;
        left: 50%;
        transform: translateX(-50%); /* Horizontally centers the logo */
        margin-left: 0;
    }

    .pro h1 {
        font-size: clamp(2rem, 6vw, 3rem);
        text-align: center;
        word-wrap: break-word;
        max-width: 90%;
        margin: 0 auto;
    }

    /* Adjust project images for smaller screens */
    .project {
        flex: 0 1 calc(50% - 40px); /* 2 items per row */
        max-width: calc(50% - 40px);
    }
}

@media (max-width: 600px) {
    /* For very small screens (e.g., mobile devices) */
    .project {
        flex: 0 1 100%; /* 1 item per row */
        max-width: 100%;
    }
}