/* Basic Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Open Sans', sans-serif;
}

html {
    scroll-behavior: smooth; /* This adds smooth scrolling for all anchor links */
}

body {
    direction: rtl;
    line-height: 1.6;
    background-color: #f4f4f4;
    color: #333;
}

/* General Image Styles */
img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 20px; /* Center images and add bottom margin */
}

/* Header Section */
header {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

nav {
    display: flex;
    align-items: center;
    justify-content: center; /* Center the nav-menu */
    position: relative;
}

.nav-logo {
    position: absolute; /* Position the logo */
    right: 20px; /* Align it to the right */
    top: 50%;
    transform: translateY(-50%);
    max-width: 115px; /* Adjust the size */
    height: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: space-between; /* Spreads items across the entire width */
    width: 70%;
    margin-right: 6%; /* Ensure nav-menu takes full width of its container */
}

.nav-menu li {
    margin: 0 15px;
}

.nav-menu li a {
    color: #fff;
    text-decoration: none;
    font-weight: 700; /* Increase font weight */
    font-size: 18px; /* Increase font size */
}

.nav-menu li a:hover {
    color: #f4f4f4;
    text-decoration: underline;
}

/* Menu Toggle Button */
.menu-toggle {
    display: none; /* Hide the menu toggle button by default */
}

/* Sections General Styling */
section {
    padding: 40px 20px;
    max-width: 1200px;
    margin: 0 auto 30px auto;
    text-align: center;
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 10px;
}

/* Platform Section Styling */
.platform-section {
    display: flex;
    flex-direction: row-reverse; /* For RTL layout */
    align-items: center;
    text-align: right;
    gap: 20px;
    padding: 20px;
}

.platform-section .platform-image {
    flex: 0 0 35%;
}

.platform-section .platform-content {
    flex: 1;
    padding-right: 20px;
}

.platform-section h2 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.platform-section ul {
    list-style-type: disc;
    list-style-position: inside;
    padding: 0;
    margin: 0 0 20px;
    text-align: right;
}

.platform-section ul li {
    margin-bottom: 10px;
    line-height: 1.6;
    font-size: 1.2em;
}

#home > div > h1 {
    text-align: center;
}

#home > div > p {
    text-align: center;
}

.platform-section ul li .align-fix {
    display: inline-block; /* Ensure it behaves like a block for better positioning */
    margin-right: 0px; /* Remove any additional right margin */
    position: relative; /* Use relative positioning */
    top: 2px; /* Adjust the vertical alignment as needed */
    text-indent: 26px; /* Adjust the indent to align with the previous text */
}


/* General Text Styling */
h1, h2, h3 {
    margin-bottom: 15px;
    text-align: right;
}

p {
    font-size: 1.2em;
    line-height: 1.8;
    text-align: right;
    margin-bottom: 15px;
}

/* Specific Styling for List Items */
ul, ol {
    list-style-position: inside;
    padding: 0;
    margin: 0 0 20px;
    text-align: right;
}

ul li, ol li {
    font-size: 1.2em;
    line-height: 1.8;
    margin-bottom: 10px;
}

/* Speed Dating Section Styling */
.speed-dating-section {
    padding: 20px;
    text-align: center;
}

.speed-dating-section .text-section {
    text-align: right;
}

/* Event Details Section */
.event-details-section {
    padding: 20px;
    text-align: center;
}

/* Carousel Section */
.carousel-section {
    padding: 20px;
    text-align: center;
    direction: ltr;
    margin-left: auto;
    margin-right: auto;
}

.carousel-section .carousel-content {
    max-width: 550px;
    margin: 0 auto;
    overflow: hidden;
}

.carousel-section .carousel {
    display: flex;
    transition: transform 0.5s ease-in-out;
    width: 100%;
}

.carousel-section .carousel .slide {
    min-width: 100%;
    box-sizing: border-box;
}

.carousel-section .carousel .slide img {
    width: 50%;
    height: auto;
    object-fit: cover;
    margin-bottom: 10px;
}

#hosts > div > h2{
    text-align: center;
}

/* Upcoming Events Section */
.upcoming-events-section {
    padding: 40px 20px;
    background-color: #fff;
    text-align: left;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin: 0 auto 30px auto;
    max-width: 1200px;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
}

.upcoming-events-content {
    display: flex;
    align-items: center; /* Vertically align items */
    justify-content: space-between; /* Space between text and icon */
    direction: rtl; /* Since we are in RTL */
}

.text-content {
    text-align: left; /* Align text to the right */
    margin-left: 20px; /* Space between text and icon */
    order: 1;
}

.events-header {
    font-size: 2.5em; /* Consistent font size with other headings */
    color: #000; /* Blue color for header */
    font-weight: bold; /* Make the header bold */
    display: inline-block; /* Inline block to wrap background */
    margin-bottom: 15px; /* Space below the header */
}

.upcoming-events-content p {
    font-size: 1.6em; /* Consistent font size */
    margin-bottom: 15px;
    text-align: left; /* Space below the paragraph */
}

.facebook-icon {
    max-width: 250px; /* Adjust icon size */
    cursor: pointer; /* Add pointer cursor */
    margin-inline-start: 150px; /* Adjust for RTL */
}



/* Contact Section */
.contact-section {
    background-color: #ffffff; /* Set the form background to white */
    padding: 60px 40px; /* Adjust padding for top/bottom and sides */
    text-align: center; /* Center the content */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Light shadow for card effect */
    margin: 40px auto; /* Add margin above and below the form */
    max-width: 1200px; /* Limit the width for better appearance */
    border-radius: 15px; /* Rounded corners */
    border: 2px solid #ddd; /* Adjust border thickness to match other elements */
}

.contact-section h2 {
    margin-bottom: 30px; /* Increase space below the heading */
    font-size: 24px; /* Heading size */
    color: #333; /* Text color */
}

.contact-section form {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Increase spacing between form elements */
    margin: 0 auto; /* Center the form within the section */
}

.contact-section .form-row {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.contact-section .form-row.two-columns {
    flex-direction: row; /* Align side by side */
    justify-content: space-between; /* Space between columns */
}

.contact-section .form-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 45%; /* Each column width */
}

.contact-section form label {
    margin-bottom: 5px; /* Space below label */
    font-size: 1.1em; /* Label font size */
    color: #333; /* Label color */
}

.contact-section form input,
.contact-section form textarea {
    width: 100%; /* Full width */
    padding: 15px; /* Padding for inputs */
    border: 2px solid #005a72; /* Border thickness and color for inputs */
    border-radius: 10px; /* Rounded corners */
    background-color: #e9e9e9; /* Input background */
    font-size: 1em; /* Font size */
}

.contact-section form input {
    height: 50px; /* Height of input fields */
}

.contact-section form textarea {
    height: 100px; /* Set a fixed height for the textarea */
    resize: vertical; /* Allow vertical resizing only */
}

.contact-section form input:focus,
.contact-section form textarea:focus {
    border-color: #0078ff; /* Focus color for input borders */
    outline: none; /* Remove default outline */
}

.contact-section form button {
    background-color: #005a72; /* Button color */
    color: #fff; /* Button text color */
    border: none; /* No border */
    padding: 15px 50px; /* Adjust padding to reduce size */
    border-radius: 10px; /* Rounded corners */
    cursor: pointer;
    font-size: 1.5em; /* Button font size */
    transition: background-color 0.3s ease; /* Smooth transition */
    margin-top: 20px; /* Space above the button */
    display: inline-block; /* Make button fit the content width */
    margin-left: auto; /* Let width adjust automatically */
    margin-right: auto;
}


.contact-section form button:hover {
    background-color: #003f50; /* Darken button on hover */
}

/* Center the placeholder text inside inputs and textareas */
.contact-section form input::placeholder,
.contact-section form textarea::placeholder {
    color: #ccc; /* Placeholder color */
    font-size: 1em; /* Match font size */
    text-align: center; /* Center the placeholder text */
    font-family: 'Open Sans', sans-serif; /* Ensure consistent font */
}

/* Center the text in the input and textarea fields */
.contact-section form input,
.contact-section form textarea {
    text-align: center; /* Center text and placeholder */
}

/* Add padding for better centering */
.contact-section form input[type="text"],
.contact-section form input[type="email"],
.contact-section form textarea {
    padding: 15px 10px; /* Adjust padding for better alignment */
}

/* Clear placeholder text when the input field is focused */
.contact-section form input:focus::placeholder,
.contact-section form textarea:focus::placeholder {
    color: transparent; /* Hide the placeholder text on focus */
}

#phone::placeholder {
    text-align: right; 
}

#name::placeholder{
    text-align: left;
}

#message::placeholder {
    text-align: right; 
}




/* Footer Section */
/* Adjusted Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    display: flex; /* Use flexbox */
    justify-content: center; /* Center the items horizontally */
    align-items: center; /* Center the items vertically */
    padding: 20px 0; /* Adjust padding as needed */
    margin: 0 auto; /* Center the footer */
    box-sizing: border-box; /* Ensure padding and width are calculated properly */
    flex-direction: row; /* Align items in a row */
    gap: 5px; /* Space between items */
}

/* Optional: Styling for individual footer items if needed */
footer p {
    margin: 0;
    text-align: center; /* Align text centrally */
    padding: 0 10px; /* Add padding if needed */
}


/* Media Queries for Responsiveness */
/* Responsive Adjustments */
@media (max-width: 768px) {
    .contact-section {
        padding: 30px 20px; /* Reduce padding */
        margin: 20px auto; /* Adjust margin for smaller screens */
    }

    .contact-section .form-row.two-columns {
        flex-direction: column; /* Stack columns */
    }

    .contact-section .form-group {
        width: 100%; /* Full width */
        margin-bottom: 15px; /* Space below */
    }
    .platform-section ul li .align-fix {
        text-indent: 0px; /* Adjust the indent to align with the previous text */
    }
   
}

/* Media Queries for Responsiveness */
@media (max-width: 1024px) {
    .nav-menu {
        justify-content: center; /* Center the menu */
        gap: 5px; /* Reduce gap for tablets */
    }

    .nav-menu li {
        margin: 0 10px; /* Adjust spacing between menu items */
    }

    /* Adjust font sizes for better readability */
    h1, h2, h3 {
        font-size: 1.8em; /* Decrease heading font size */
    }

    p, li {
        font-size: 1em; /* Slightly decrease font size */
    }

    /* Adjust platform section for better alignment */
    .platform-section {
        flex-direction: column; /* Stack content vertically */
        align-items: center;
        text-align: center;
    }

    .platform-section .platform-image,
    .platform-section .platform-content {
        width: 100%; /* Full width for better stacking */
    }

    .platform-section .platform-content {
        padding-top: 20px; /* Add space above content */
    }
    .platform-section ul li .align-fix {
        text-indent: 0px; /* Adjust the indent to align with the previous text */
    }
}

/* Mobile Landscape and smaller screens */
@media (max-width: 768px) {
    header {
        flex-direction: column; /* Stack header elements */
        padding: 20px 10px; /* Adjust padding */
    }

    .nav-menu {
        flex-direction: column; /* Stack menu items vertically */
        align-items: center; /* Center items */
        gap: 5px; /* Reduce gap */
    }

    .nav-menu li {
        margin: 5px 0; /* Adjust spacing between items */
    }

    .nav-logo {
        margin-bottom: 20px; /* Space below logo */
    }

    section {
        padding: 30px 15px; /* Reduce padding */
    }

    .contact-section {
        padding: 30px 20px; /* Reduce padding */
        margin: 20px auto; /* Reduce margin */
    }

    .contact-section .form-row.two-columns {
        flex-direction: column; /* Stack columns vertically */
    }

    .contact-section .form-group {
        width: 100%; /* Full width for form groups */
        margin-bottom: 15px; /* Space below each group */
    }

    .platform-section .platform-content {
        padding-top: 10px; /* Less space above content */
    }

    .carousel-section .carousel .slide img {
        width: 90%; /* Reduce image width */
    }

    .upcoming-events-content {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center align items */
        text-align: center; /* Center the text */
    }

    .text-content {
        text-align: center; /* Center the text */
        margin-left: 0; /* Remove left margin */
        margin-top: 20px; /* Add some margin above */
    }

    .facebook-icon {
        margin-inline-start: 0; /* Remove inline margin for icon */
        width: 100px; /* Adjust the size of the icon */
    }

    .events-header {
        font-size: 2em; /* Adjust font size */
    }

    .upcoming-events-section p {
        font-size: 1.2em; /* Adjust font size */
    }
    .platform-section ul li .align-fix {
        text-indent: 0px; /* Adjust the indent to align with the previous text */
    }
}

/* Mobile Portrait and smaller screens */
@media (max-width: 480px) {
    header {
        padding: 5px 0px; /* Reduce padding */
    }
     .nav {
        width: 100%; /* Ensure nav takes full width */
        display: flex;
        justify-content: center; /* Center items horizontally */
        align-items: center; /* Center items vertically */
    }

    .menu-toggle {
        display: block; /* Show menu toggle */
        position: absolute;
        top: 20px; /* Position it at the top-right */
        right: 25px;
        font-size: 1.5em; /* Adjust size */
        cursor: pointer;
    }

    .nav-menu {
        display: none; /* Hide menu by default */
        flex-direction: column; /* Stack items */
        width: 100%; /* Full width */
        text-align: center;
        background-color: #333; /* Background color */
    }

    .nav-menu.active {
        display: flex; /* Show menu on toggle */
    }

    .nav-menu li {
        margin: 10px 0; /* Space between items */
    }

    .nav-menu li a {
        font-size: 1em; /* Adjust font size */
    }

    .nav-logo {
        position: static;
        max-width: 25%; /* Set width to 30% */
        display: block; /* Display as block to respect margin settings */
        margin: 0 auto;
        margin-top: 10%; /* Center the logo */
    }

    section {
        padding: 20px 10px; /* Less padding */
    }
     .nav {
        width: 100%; /* Ensure nav takes full width */
        display: flex;
        justify-content: center; /* Center items horizontally */
        align-items: center; /* Center items vertically */
    }

    h1, h2, h3 {
        font-size: 1.4em; /* Reduce heading sizes */
    }

    p, li {
        font-size: 0.9em; /* Reduce font size */
    }

    .carousel-section .carousel .slide img {
        width: 60%; /* Full width for images */
    }

    .speed-dating-section img {
        width: 100%;
        height: auto; /* Adjust image size */
    }

    .contact-section {
        padding: 20px 15px; /* Reduce padding */
        max-width: 95%; /* Full width with some margin */
    }

    .contact-section .form-row.two-columns {
        flex-direction: column; /* Stack columns */
    }

    .contact-section .form-group {
        width: 100%; /* Full width */
        margin-bottom: 10px; /* Space below */
    }
    #upcoming-events > div {
        display: flex;
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align the elements */
    }

    /* Position the headline at the top and center */
    #upcoming-events > div > div > h2 {
        order: 1; /* Ensure it stays on top */
        text-align: center;
        width: 100%; /* Ensure it takes full width */
        margin-bottom: 15px;
    }

    /* Align the paragraph on the left */
    #upcoming-events > div > div > p {
        order: 1;
        text-align: center;
        width: 100%;
        margin-bottom: 15px;
    }

    /* Position the image on the right */
    #upcoming-events > div > a > img {
        order: 3;
        align-self: flex-end; /* Align the image to the right */
        width: 80px; /* Adjust size if needed */
        margin-top: 10px;
    }

    .text-content {
        margin-left: 0; /* Remove left margin */
    }

    .facebook-icon {
        width: 80px; /* Adjust icon size */
        margin-left: auto;
        margin-right: auto;
    }
    .platform-section ul li .align-fix {
        text-indent: 0px; /* Adjust the indent to align with the previous text */
    }

    #technology > img {
        width: 60%;
    }
    #phone::placeholder {
        text-align: right !important; 
    }
    
    #name::placeholder{
        text-align: right;
    }
    
    #message::placeholder {
        text-align: right; 
    }
    #email::placeholder {
        text-align: right;
    }

    #technology > div > p:nth-child(2) {
        font-size: 1.2em;
    }
    #technology > div > p:nth-child(4) {
        font-size: 1.2em;
    }

    #speedDating > div > p {
        font-size: 1.2em;
    }

    #home > div > h1 {
        font-size: 2rem;
    }

    #home > div > p {
        font-size: 1.2em;
    }
   
    #contact > div > h2 {
        text-align: center;
    }

    .text-content {
        text-align: center; /* Align text to the right */
        margin-left: 20px; /* Space between text and icon */
        order: 0;
    }

    #upcoming-events > div > div > h2 {
        text-align: center;
    }

    #status-message {
        margin-top: -6%;
        padding-bottom: 1%;
        font-size: 24px;
        font-weight: 700;
    }

    

    

}

    /* Adjust Speed Dating Image */
    body > section.speed-dating-section > img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

    

    /* Center Form Labels */
    .contact-section form label {
        text-align: center;
    }

/* Adjust Speed Dating Image */
.speed-dating-section > img {
    width: 100%;
    height: 300px;
    object-fit: cover;
}

/* Center Form Labels */
.contact-section form label {
    text-align: center;
}

/* Media Queries for Responsiveness */

/* Existing media queries */

/* Adjustments for Upcoming Events Section */
@media (max-width: 768px) {
    /* Upcoming Events Section Adjustments */
    .upcoming-events-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .upcoming-events-content .events-header {
        margin-bottom: 20px;
        text-align: center;
    }

    .upcoming-events-content .text-content,
    .upcoming-events-content a {
        width: 100%;
        max-width: 500px;
    }

    .upcoming-events-content .text-content {
        text-align: left;
        margin-bottom: 20px;
    }

    .upcoming-events-content a {
        text-align: right;
    }
}

@media (max-width: 1024px) {
    /* Existing adjustments */

    /* Upcoming Events Section Adjustments */
    .upcoming-events-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .upcoming-events-content .events-header {
        margin-bottom: 20px;
        text-align: center;
    }

    .upcoming-events-content .text-content,
    .upcoming-events-content a {
        width: 100%;
        max-width: 500px;
    }

    .upcoming-events-content .text-content {
        text-align: left;
        margin-bottom: 20px;
    }

    .upcoming-events-content a {
        text-align: right;
    }
}

#phone::placeholder {
    text-align: left; 
}

#name::placeholder{
    text-align: right;
}


#status-message {
    margin-top: -6%;
    padding-bottom: 1%;
    font-size: 24px;
    font-weight: 700;
}

#contact-header {
    padding-bottom: 3%;
}