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

body, html {
    width: 100%;
    height: 100%;
    font-family: 'DM Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
    display: flex;
    height: 100vh; /* Use the full viewport height */
    align-items: center;
    justify-content: center;
    background-color: #000000; /* This will be the background color of the left side */
    overflow: hidden;
}

.right-side {
    width: 40%; /* Now 40% width */
    position: relative; /* Set to relative for absolute positioning of children */
    overflow: hidden; /* This will prevent the image from extending beyond the div */
}

.right-side img {
    right: 50%; /* Center horizontally */
    top: 50%; /* Center vertically */
    width: 200%;
    height: 200%;
    object-fit: cover; /* Cover the div without stretching */
    overflow: hidden; /* This will prevent the image from extending beyond the div */
}


@keyframes flicker {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; } /* Make the dot less transparent at the fastest point of the flicker */
}

.dot {
    height: 35px;
    width: 35px;
    background-color: rgb(255, 255, 255); /* White color */
    border-radius: 50%;
    opacity: 0; /* Initial state is not visible */
    animation: flicker 0.5s infinite; /* Make the flicker faster */
    margin-bottom: 35px;
}


.left-side {
    width: 70%; /* Now 60% width */
    padding: 80px; /* Increase padding as needed */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    overflow-y: scroll;
}

.left-side h1 {
    font-size: 4.5em;
    margin-bottom: 20px;
    color: white; /* Darker text for better readability */
    font-weight: 300;
    letter-spacing: -0.05em;
    line-height: 1;
}

.left-side h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #9451ff; /* Darker text for better readability */
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1;
}

.left-side p {
    font-size: 1.5em;
    margin-bottom: 20px;
    color: white; /* Darker text for better readability */
    letter-spacing: -0.03em;
    font-weight: 300;
}
.email-form {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
    align-items: center; /* Center the items vertically */
}

.email-form input[type=email] {
    flex-grow: 1;
    padding: 15px 20px; /* Increased padding for a thicker appearance */
    border: 2px solid #d1d1d1; /* Thicker border */
    border-radius: 30px; /* Larger border-radius for a more modern, rounded look */
    font-size: 16px; /* Larger font size */
    outline: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* Subtle inner shadow for depth */
    transition: border-color 0.3s, box-shadow 0.3s; /* Smooth transition for focus */
}

.email-form input[type=email]:focus {
    border-color: #9451ff; /* Highlight color when the input is focused */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2); /* Deeper shadow for focus */
}

.email-form button {
    padding: 15px 25px; /* Increased padding for a thicker button */
    border-radius: 30px; /* Larger border-radius to match the input field */
    border: none;
    background-color: #9451ff;
    color: white;
    font-size: 16px; /* Larger font size */
    cursor: pointer;
    transition: background-color 0.3s, box-shadow 0.3s;
}

.email-form button:hover {
    background-color: #741dff;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Larger shadow on hover */
}


#responseMessage {
    font-size: 1em;
}
#responseMessage.error {
    color: #ff5365; /* Example: Red color for error messages */
    /* Other styling for error messages */
}

#responseMessage.success {
    color: #3af566; /* Example: Green color for success messages */
    /* Other styling for success messages */
}

.social-links {
    display: flex;
    gap: 10px;
    font-size: 24px;
}
.hr-between {
    border: 0;
    height: 1px;
    background: #ddd; /* Darker white color for the line */
    margin-left: 0; /* Align to the left */
    margin-right: auto; /* Keep right margin auto */
    width: 10%; /* Width set to 10% of the container */
}

#animate1 {
    margin-bottom: 20px; /* Increase space below animate1 */
}

#animate2 {
    margin-top: 20px; /* Increase space above animate2 */
}

#animate1 {
    margin-bottom: 35px;
}

#animate2 {
    margin-top: 35px; 
}
.navigation-links {
    display: flex;
    justify-content: center; /* Adjust if you want the links to the left or right */
    gap: 20px; /* Space between links */
    margin-top: 20px; /* Space above the links */
    flex-wrap: wrap; /* Ensures wrapping on smaller screens */
}

.nav-link {
    text-decoration: none;
    color: #b6b6b6; /* Starting color */
    font-size: 16px; /* Match the size to your design */
    transition: color 0.3s ease; /* Smooth transition for color change */
    padding: 5px; /* Padding for larger clickable area */
}

.nav-link:hover, .nav-link:focus {
    color: rgb(151, 87, 255); /* Color on hover */
}

/* Add media queries if needed to adjust link styles on different screen sizes */

@media screen and (max-width: 600px) {
    .nav-link {
        font-size: 14px; /* Smaller font size on smaller screens */
    }
}

/* Media query for mobile sizes */
@media screen and (max-width: 900px) { /* Adjust the max-width as needed for your breakpoint */
    .left-side {
        width: 100%; /* left side takes full width */
        padding: 20px; /* Remove padding */
    }
    .right-side img {
        width: 300%;
        height: 300%;
    }
}
/* Media query for mobile sizes */
@media screen and (max-width: 700px) { /* Adjust the max-width as needed for your breakpoint */
    .right-side {
        display: none; /* Hide the right side on mobile */
    }

    .left-side {
        width: 100%; /* left side takes full width */
        padding: 20px; /* Remove padding */
    }
    .right-side img {
        width: 400%;
        height: 400%;
    }
    
}