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

/* Base Styles */
body {
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    background-color: #ddddd8;
    color: #111;
    margin: 0;
    padding: 0;
}

/* Navigation Bar */
nav {
    width: 100%;
    background-color: rgb(221, 221, 216);
    border-bottom: 0.5% solid red;
    padding-left: 2%;
    padding-right: 5%;
    padding-top: 1%;
    padding-bottom: 1%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
#logo {
    display: inline-block;
    color: black;
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    font-weight: 900;
    font-style: italic;
    font-size: 1.5vw;
    margin-right: 2%;
}

#logo:hover {
    cursor: default;
}

/* UX/UI Text */
#header-text {
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    font-size: 1.2vw;
    color: rgb(116, 109, 102);
    white-space: nowrap; 
    margin-left: 3%;
    margin-right: auto; 
}

/* Navigation Links */
.nav-links {
    perspective: 1000px; /* Provides depth for 3D effect */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2%;
}

.nav-links li {
    display: inline-block;
    position: relative;
}

/* 3D Button Styles */
.button-3d {
    position: relative;
    width: 5vw; /* Use viewport width for responsiveness */
    height: 5vh; /* Use viewport height for responsiveness */
    transform-style: preserve-3d; /* Preserve 3D transforms for child elements */
    transition: transform 0.3s ease; /* Smooth transition for rotation */
    cursor: pointer;
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
}

.button-3d:hover {
    transform: rotateX(-90deg); /* Rotate on hover to show the top face */
}

.button-face {
    position: absolute;
    width: 100%; /* Match the width of .button-3d */
    height: 100%; /* Match the height of .button-3d */
    display: flex;
    align-items: center;
    justify-content: center;
    backface-visibility: hidden; /* Hide the back face when rotated */
    font-size: 1.2vw; /* Use viewport width for font size responsiveness */
    font-weight: 400; /* Lighter font weight */
    color: rgb(116, 109, 102); /* Grayish color */
    box-sizing: border-box;
    text-align: center;
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
}


.front {
    background-color: rgb(221, 221, 216);
    transform: rotateX(0deg) translateZ(15px); /* Position the front face */
    color: rgb(116, 109, 102); /* Match the font color */
    font-weight: 400; /* Lighter font weight */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
}

.top {
    background-color: rgb(221, 221, 216);
    transform: rotateX(90deg) translateZ(15px); /* Position the top face */
    color: rgb(116, 109, 102); /* Match the font color */
    font-weight: 400; /* Lighter font weight */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
}

/* Additional Link States */
.nav-links a:link,
.nav-links a:visited {
    color: rgb(116, 109, 102); /* Grayish color */
    text-decoration: none; /* Remove underline */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    font-weight: 600; /* Lighter font weight */
}

.nav-links a:hover {
    color: rgb(116, 109, 102); /* Maintain color on hover */
}

.nav-links a:active {
    color: rgb(116, 109, 102); /* Maintain color when active */
}

.contact-container {
    margin-top: 3em;
    max-width: 1200px;
    margin-left: 2em;
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.contact-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    
    flex-wrap: wrap;
}

.header-text {
    flex: 1 1 60%;
}

.contact-header h1 {
    font-family: 'Roboto Condensed', sans-serif; 
    font-size: 5em;
    font-weight: 700;
    margin: 0;
}


.contact-header h2 {
    font-size: 2em;
    font-weight: 600;
    font-family: 'Roboto Condensed', sans-serif; 
}

.contact-header p {
    font-size: 1.2em;
    font-weight: 600;
    color: #5f5f5f;
    line-height: 1.5;
    font-family: 'Roboto Condensed', sans-serif; 
}

.contact-image {
    flex: 1 1 35%;
    display: flex;
    align-items: flex-start; /* Align to top */
    justify-content: flex-end; /* Align image to the right */
    max-width: 500px; /* Limit max-width for better alignment */
}

.contact-image img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    object-fit: cover;
}

.form-info-container {
    display: flex;
    gap: 2%;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: -22em; /* Adjust the margin to shift the form up */
    margin-left: -2em;
}

.contact-form {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Creates two columns for input fields and the message box */
    gap: 1em;
    padding: 2em;
    border-radius: 10px;
    
    flex: 1;
    max-width: 600px;
    width: 100%;
}

/* Form Labels */
.contact-form label {
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    font-size: 0.9em; /* Slightly smaller than input text */
    font-weight: bold; /* Make the labels bold for emphasis */
    color: #111; /* Use the primary text color */
    margin-bottom: 0.2em; /* Add a bit of space below the labels */
    display: block; /* Make labels block-level to appear above inputs */
}


.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5em;
}

.message-group {
    display: flex;
    flex-direction: column;
    gap: 1em;
    grid-column: 2; /* Aligns the message box to the second column */
    margin-left:20em;
    margin-right: -20em;
    margin-top:-14em ;
    width: 150%;
    
}

input[type="text"],
input[type="email"],
textarea {
    padding: 0.5em;
    font-size: 1em;
    border: 1px solid #ccc;
    background-color: #fff;
    color: #555;
    width: 100%;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #d9d7d0; /* Match the background color from the reference */
    resize: none;
}

textarea {
    height: 15em;   
}

.send-message-button {
    background-color: #333;
    color: #fff;
    padding: 0.7em 2em;
    border: none;
    border-radius: 20px;
    font-size: 1em;
    cursor: pointer;
    text-align: center;
    width: fit-content;
    grid-column: 1 / span 2; /* Button spans across both columns */
    justify-self: start;
    margin-top: 1em; /* Adds space above the button */
}

.send-message-button:hover {
    background-color: #555;
    transition: background-color 0.3s ease;
}

.contact-info {
    font-family: 'Roboto Condensed', sans-serif; /* Use a specific font for consistency */
    font-size: 0.9em; /* Slightly smaller font size */
    text-align: left; /* Align text to the left */
}

.contact-info h3 {
    font-size: 0.8em; /* Smaller font size for the heading */
    font-weight: bold; /* Bold heading */
    letter-spacing: 1px; /* Increase spacing between letters */
    color: #111; /* Darker color for the heading */
    
}

.contact-info p {
    font-size: 1.5em; /* Larger font size for the content */
    font-weight: bold; /* Bold font for emphasis */
    color: #111; /* Use the primary text color */
}



/* For smaller screens: adjust flex properties and set image width to 0 */
@media (max-width: 1200px) {
    .form-info-container {
        flex-direction: column; /* Stack items on smaller screens */
        margin-top: 0; /* Reset margin-top for smaller screens */
    }
    
    .contact-image {
        max-width: 0; /* Collapse the image container */
    }
}

/* For smaller screens */
@media (max-width: 768px) {
    .contact-header {
        flex-direction: column; /* Stack header on smaller screens */
        align-items: center;
    }

    .contact-header h1 {
        font-size: 2.5em;
    }

    .contact-header h2 {
        font-size: 1.8em;
    }

    .contact-header p {
        font-size: 1em;
    }

    .contact-container, .contact-form {
        padding: 1em;
        margin-top: 0;
        width: 100%;
    }

    .contact-image {
        display: none; /* Hide the image container on phones */
    }
    .form-group{
        width:70%;
    }

    .message-group{
        margin-left: 14em;
        width:100%;
    }

    .send-message-button {
        width: 100%;
        text-align: center;
    }
}

@media only screen and (max-width: 480px) {
    .contact-header {
        flex-direction: column; /* Stack header on smaller screens */
        align-items: center;
    }

    .contact-header h1 {
        font-size: 2.5em;
    }

    .contact-header h2 {
        font-size: 1.8em;
    }

    .contact-header p {
        font-size: 1em;
    }

    .contact-container, .contact-form {
        padding: 1em;
        margin-top: 0;
        width: 100%;
    }

    .contact-image {
        display: none; /* Hide the image container on phones */
    }
    .form-group{
        width:90%;
    }

    .contact-form{
        margin-left: 1em;
    }


    .message-group{
        margin-left: 8em;
        width:100%;
        margin-top: -14em;
    }

    .send-message-button {
        width: 100%;
        text-align: center;
    }
}

/* Footer Styling */
#footer {
    background-color: rgb(221, 221, 216); /* Match to rest of page */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    color: #111; /* Dark text color */
    margin-top: 3em; /* Space above the footer */
    position: relative; /* For positioning the back-to-top button */
}

/* Footer Section Styling */
.footer-section {
    display: flex; /* Use flexbox for the footer section */
    justify-content: space-between; /* Evenly space columns */
    flex-wrap: wrap; /* Wrap columns on smaller screens */
    margin-bottom: 2em; /* Space below the footer section */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    font-size: 1em;
}

/* Footer Column Styling */
.footer-column {
    flex: 1; /* Flex each column equallya */
    margin: 0 1em; /* Margin between columns */
    min-width: 150px; /* Minimum width for each column */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
}

.footer-column h4 {
    font-size: 1em; /* Font size for column headings */
    font-weight: bold; /* Bold headings */
    margin-bottom: 0.5em; /* Space below headings */
    border-bottom: 1px solid #111; /* Bottom border for headings */
    padding-bottom: 0.5em; /* Padding under headings */
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
}

.footer-column ul {
    font-size: 1vw;
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    color:#7e7e7e;
    list-style: none; /* Remove bullet points */
    padding: 0; /* Remove default padding */
    margin: 0; /* Remove default margin */
}

.footer-column ul li {
    margin-bottom: 0.5em; /* Space between list items */
}

.footer-column ul li a {
    color: #111; /* Link color */
    text-decoration: none; /* Remove underline */
}

.footer-column ul li a:hover {
    text-decoration: underline; /* Underline on hover */
}

/* Footer Bottom Styling */
.footer-bottom {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Space between footer content */
    align-items: flex-start; /* Align to the top */
    flex-wrap: wrap; /* Wrap content on smaller screens */
    margin-top: 2em; /* Space above the bottom text */
    margin-left: 1em;
}

.footer-info {
    text-align: left; /* Align text to the left */
    
}

.footer-year {
    font-size: 1.5em; /* Larger font size for the year */
    font-weight: bold; /* Bold year text */
    margin-bottom: 0; /* No margin below the year */
}

.footer-name {
    font-size: 2.5em; /* Larger font size for the name */
    font-weight: bold; /* Bold name text */
    margin-top: 0; /* No margin above the name */
}

/* Footer Right Section Styling */
.footer-right {
    display: flex; /* Flexbox for horizontal alignment */
    align-items: center; /* Align items vertically in the center */
    margin-top: 3%;
}

.footer-time {
    font-family: 'Roboto', sans-serif; /* Use the same font for consistency */
    font-size: 0.9em; /* Slightly smaller font size for the time */
    text-align: left; /* Align text to the left */
    margin-top: 5%;
    margin-right: 3%;
}

/* Back to Top Button */
.back-to-top {
    margin-left: 1em; /* Add space between time and button */
    margin-top: -1.5em;
}

.back-to-top a img {
    width: 70px; /* Size of the back-to-top icon */
    height: 70px; /* Size of the back-to-top icon */
    border-radius: 50%; /* Rounded shape */
    background-color: #333; /* Dark background for icon */
    padding: 1em; /* Padding inside icon */
    transition: background-color 0.3s ease; /* Hover transition */
}

.back-to-top a img:hover {
    background-color: #555; /* Lighter background on hover */
}