/* Page 4 Styling */
#page-4 {
    background-color: #000000; /* Dark background color */
    color: #fff; /* White text color */
    padding: 10vh 0; /* Use viewport height for padding */
    text-align: center; /* Center-align text */
    border-radius: 10px; /* Rounded corners */
    margin: 5vh auto; /* Center the section with auto margin and viewport height */
    
    width: 95%; /* Reduce width for flexibility */
    height: auto; /* Remove fixed height for responsiveness */
    display: flex; /* Use flexbox to center content */
    justify-content: center; /* Center horizontally */
    align-items: center; /* Center vertically */
    flex-direction: column; /* Align content vertically */
    position: relative; /* Relative positioning for absolute elements */
}

/* Contact Form Content Styling */
.CF-content {
    width: 80%; /* Use percentage width for flexibility */
    padding: 5%; /* Adjust padding to reduce excess space */
    margin: 0 auto; /* Center the content */
}

/* Contact Form Title Styling */
.CF-title {
    font-size: 6vw; /* Use viewport width for responsive font size */
    line-height: 1.2; /* Adjust line height for better spacing */
    max-width: 60%; /* Ensure the title does not overflow its container */
    margin: 0 auto; /* Center the title horizontally */
}

/* Small Text Above Button */
.CF-subtitle {
    font-size: 1.2em; /* Small text size */
    color: #888; /* Gray color */
    margin-bottom: 1em; /* Space below the subtitle */
}

/* Contact Form Button Styling */
.CF-button {
    background-color: #333; /* Darker background for button */
    color: #fff; /* White text color */
    padding: 1em 1.5em; /* Padding inside button */
    font-size: 1.5em; /* Slightly larger font size for button text */
    border: none; /* No border */
    border-radius: 30px; /* Rounded button */
    text-decoration: none; /* Remove underline from link */
    display: inline-flex; /* Display as inline-flex for better alignment */
    align-items: center; /* Align items in the center */
    justify-content: center; /* Center content horizontally */
    transition: background-color 0.3s ease; /* Smooth transition for hover effect */
    margin-top: 1em; /* Margin on top of the button */
}

/* Button Image Icon Styling */
.CF-icon {
    width: 1em; /* Use relative units for responsiveness */
    height: 1em; /* Use relative units for responsiveness */
    margin-left: 0.5em; /* Space between the text and the image */
    display: inline-block; /* Ensures it aligns properly with the text */
    vertical-align: middle; /* Aligns the image vertically with the text */
}

/* Button Hover Effect */
.CF-button:hover {
    background-color: #555; /* Lighter background on hover */
    cursor: pointer; /* Pointer cursor on hover */
}

/* Image at the Bottom Left */
.bottom-left-image {
    position: absolute; /* Absolute positioning */
    bottom: 5vh; /* Distance from the bottom */
    left: 5vw; /* Distance from the left */
    width: 10vw; /* Adjust size to fit */
    height: auto; /* Maintain aspect ratio */
}

/* Text at the Bottom Right */
.bottom-right-text {
    position: absolute; /* Absolute positioning */
    bottom: 5vh; /* Distance from the bottom */
    right: 5vw; /* Distance from the right */
    text-align: right; /* Align text to the right */
    color: #e2e2da; /* Light text color */
    font-size: 0.8em; /* Smaller font size */
}

/* Spacer Class */
.spacer {
    display: inline-block;
    width: 0.5em; /* Adjust the width for the desired spacing */
}