body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 50px;
    display: flex; /* Use flexbox for centering */
    flex-direction: column; /* Align items in a column */
    align-items: center; /* Center items horizontally */ 
    height: 100vh; /* Full viewport height */
    margin: 0 auto; /* Remove default margin */
    background-color: #ede8eaff;
    /* justify-content: center; */
}
.main-container {
    background-color: #f7f3f4;
    width: 50%;

}
.my-image-logo-center {
    width: 300px; /* Adjust the width as needed */
    height: auto; /* Keeps the aspect ratio */
    border-radius: 10px; /* Optional: makes the corners rounded */
    display: block; /* Centers the image if using margin auto */
    margin: 20px auto; /* Centers the image horizontally */
    margin-top: 5px;
    margin-bottom: 0;
    align-items: center;
}

.assistant-font {
  font-family: "Assistant", Arial;
  font-optical-sizing: auto;
  font-weight: 200;
  font-style: normal;
  color: #333;
  direction: rtl;
  text-align: right;
  align-self: flex-end;
}.whatsapp-container {
    display: flex;  /* Aligns items in a row */
    align-items: center; /* Centers items vertically */
    justify-content: center; /* Centers the content horizontally */
    gap: 10px; /* Adds a controlled gap between the links */
}

.whatsapp-link {
    display: inline-block;
    text-align: right;
    /* Remove `margin: 20px auto;` to prevent extra spacing */
}

.whatsapp-link img {
    width: 30px; /* Adjusted size */
    height: auto;
}

.desktop-phone {
    margin-left: 10px; /* Optional, can be removed if not needed */
    font-family: "Assistant", Arial;
    font-size: 16px; /* Adjust size as needed */
    color: #000; /* Adjust color as needed */
    display: block;
    /* Remove `margin: 20px auto;` to avoid unnecessary space */
}

.mobile-phone {
    font-family: "Assistant", Arial;
    display: none;
    color: black;
    text-decoration: none;
}
.in-page-headers {
    font-weight: 300;
    font-size: 48px;
    color: #503530;
    align-self: center;
    text-align: center; /* Change to center */
    width: 80%; /* Keep the width as is or adjust if needed */
    margin: 0 auto; /* Center the element within its container */
}
.plain-text {
    font-family: "Assistant", Arial;
    font-weight: 200;
    font-size: 22px;
    color: #503530;
    align-self: center;
    direction: rtl; /* This is fine as it keeps the text direction */
    text-align: center; /* Change to center */
    width: 80%; /* Keep the width as is or adjust if needed */
    margin: 0 auto; /* Center the element within its container */
}

form {
    display: flex;
    flex-direction: column;
    width: 60%;
    margin: 0 auto; /* Center the form */
}

input, textarea {
    font-family: "Assistant", Arial;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px; /* Adjust font size as needed */
    direction: rtl; /* Set text direction to right-to-left */
    text-align: right; /* Align text to the right */
    resize: none; /* Disable resizing for textarea */
    width: 100%;
    box-sizing: border-box;
}

input::placeholder, textarea::placeholder {
    color: gray; /* Color of the placeholder text */
    opacity: 1; /* Ensure the placeholder is fully visible */
    direction: rtl; /* Set text direction to right-to-left */
    text-align: right; /* Align text to the right */
    font-family: "Assistant", Arial;
}

button {
    margin-top: 20px;
    padding: 10px;
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

button:hover {
    background-color: #45a049; /* Darker green on hover */
}

.navbar-main {
    background-color: #f1f1f1;
    padding: 10px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Allows the items to wrap to the next line on smaller screens */
    direction: rtl;
}

.navbar-main a {
    margin: 5px 10px; /* Reduce margins for better fit */
    text-decoration: none;
    color: #333;
    font-weight: bold;
    display: block; /* Ensures each link takes up space for easy tapping */
    cursor: pointer;
}

.navbar-main a:hover {
    color: #4CAF50;
    cursor: pointer;
}




/* For mobile devices */
@media (max-width: 768px) {
    .desktop-phone {
        display: none;
    }
    .mobile-phone {
        display: block;
    }
    .main-container {
        width: 90%; /* Change width to be more responsive */
        padding: 20px; /* Add some padding for mobile */
    }

    .my-image-logo-center {
        width: 80%; /* Make image responsive */
    }

    .desktop-phone {
        display: none;
    }
    .mobile-phone {
        display: block;
    }

    .in-page-headers {
        font-size: 32px; /* Smaller font size for mobile */
    }

    .plain-text {
        font-size: 18px; /* Adjust font size for better readability */
    }

    form {
        width: 100%; /* Full width on mobile */
    }

    input, textarea {
        font-size: 14px; /* Slightly smaller font size */
    }

    button {
        width: 100%; /* Make button full width */
    }
    .navbar-main {
        flex-direction: row; /* Stack links vertically */
        padding: 15px; /* Increase padding for better touch targets */
        gap: 15px; /* Add space between the items */
    }

    .navbar-main a {
        font-size: 18px; /* Increase text size for better readability */
        margin: 0; /* Add vertical spacing */
        cursor: pointer;
    }
}