body {
            font-family: 'Georgia', serif;
            background-color: #E9E4E0; /* Light gray background */
            margin: 0;
            padding: 0;
            color: #333; /* Dark gray text */
        }
        header {
            background-color: #fff; /* White background */
            color: #333; /* Dark gray text */
            padding: 20px;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            border-bottom: 1px solid #EDE1D1;
        }
        section {
            margin: 20px auto;
            max-width: 800px;
        }
        .section-title {
            font-size: 28px;
            margin-bottom: 15px;
            color: #111; /* Very dark gray */
        }

       

/* Media query for larger screens */
@media (min-width: 768px) {
    section {
        grid-template-columns: repeat(2, 1fr); /* Two columns on larger screens */
    }

    /* Center the last project card in the second row */
    .project:nth-child(3) {
        grid-column: 1 / 3; /* Place the last card in the middle of the row */
        max-width: 400px; /* Constrain its width */
        justify-self: center; /* Center it within its own space */
    }
}




       .project {
   
    align-items: center;
    margin-bottom: 30px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

/* For larger screens */
.project img {
   max-width: 100%;
    margin-right: 20px;
    border-radius: 8px;
}

/* Adjust layout for smaller screens */
@media (max-width: 768px) {
    .project {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .project img {
        margin-right: 0;
        margin-bottom: 15px;
        max-width: 100%;
    }
}
        .project-title {
            font-size: 24px;
            color: #111; /* Very dark gray */
        }
        .project-description {
            margin-top: 10px;
            line-height: 1.8;
        }
        .cta-button {
            display: inline-block;
            margin-top: 15px;
            padding: 12px 24px;
            background-color:#010101;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            font-size: 16px;
        }
        footer {
            background-color: #fff; /* White background */
            color: #333; /* Dark gray text */
            text-align: center;
            padding: 20px;
            border-top: 1px solid #e1e1e1;
        }
        .contact-info {
            margin-top: 10px;
        }
        .fa-envelope {
            font-size: 24px;
            cursor: pointer;
            color: #000; /* Color of the icon */
        }




        #modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 999;
        }
        
        #contact-form-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: white;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
            width: 80%;
            max-width: 500px;
            z-index: 1000;
        }
        
        form {
            display: flex;
            flex-direction: column;
        }
        
        form label {
            margin-bottom: 5px;
        }
        
        form input, form textarea {
            margin-bottom: 15px;
            padding: 10px;
            font-size: 1rem;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        
        form button {
            padding: 10px;
            font-size: 1rem;
            cursor: pointer;
        }


        #contact-form textarea {
            width: 100%; /* Ensure input and textarea fill the container */
            max-width: 100%; /* Prevent growing beyond the container width */
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            box-sizing: border-box; /* Includes padding in width calculations */
        }
        
        button[type="button"] {
            background-color: #ef8354;
            color: white;
            border: none;
        }

        button[type="submit"] {
            background-color: #705447;
            color: white;
            border: none;
        }

        .modal-success, .modal-error {
            text-align: center;
        }
        .modal-success h2 {
            color: #4caf50;
        }
        .modal-error h2 {
            color: #f44336;
        }


        .modal-success button, .modal-success button {
            padding: 10px 20px;
            font-size: 16px;
            font-weight: bold;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            transition: transform 0.2s, box-shadow 0.2s;
            outline: none;
            background-color:#010101;
            color:white;
        }