/**
Theme Name: Suhul
Author: Abdulwahab Alghamdi
Author URI: https://iskills.sa
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: suhul
Template: astra
*/

/* Align footer menu items to right */
#astra-footer-menu .menu-item, .menu-link {
	align-items: flex-start;
	color: #fff;
}
@media (max-width: 768px) {
    #custom_html-3 p {
		text-align:center !important;
    }

/* General Form Wrapper Styles */
.cf7-form-wrapper {
    /* Removed: background-color: #ffffff; */
    padding: 30px; /* Adjust as needed */
    border-radius: 15px; /* Subtle rounded corners for the overall form container */
    /* Removed: box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05); */
    max-width: 700px; /* Adjusted: Max width for the form, closer to image */
    margin: 40px auto; /* Center the form on the page */
    font-family: 'Inter', sans-serif; /* Use Inter font or your preferred font */
    direction: rtl; /* Ensure RTL layout for the form */
    text-align: right; /* Align text to the right */
}
/* RTL Style for all input fields and textareas */
.cf7-form-wrapper input[type="text"],
.cf7-form-wrapper input[type="email"],
.cf7-form-wrapper input[type="tel"],
.cf7-form-wrapper textarea {
    width: 100%;
    padding: 15px 20px;
    margin-bottom: 20px; /* Space between fields */
    border: 1px solid #e0e0e0; /* Light grey border */
    border-radius: 12px; /* Adjusted: Slightly more rounded corners for inputs */
    background-color: #f8f8f8; /* Very light grey background */
    font-size: 16px;
    color: #333; /* Darker text color for input */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    text-align: right; /* Align input text to the right */
}
/* Focus state for input fields and textareas */
.cf7-form-wrapper input[type="text"]:focus,
.cf7-form-wrapper input[type="email"]:focus,
.cf7-form-wrapper input[type="tel"]:focus,
.cf7-form-wrapper textarea:focus {
    border-color: #a0a0a0; /* Slightly darker border on focus */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); /* Subtle shadow on focus */
    outline: none; /* Remove default outline */
}
/* Placeholder text style */
.cf7-form-wrapper ::placeholder {
    color: #999; /* Light grey for placeholder text */
    opacity: 1; /* Ensure placeholder is visible */
    text-align: right; /* Align placeholder text to the right */
}

.cf7-form-wrapper :-ms-input-placeholder { /* For Microsoft Edge */
    color: #999;
    text-align: right;
}
/* Textarea specific height */
.cf7-form-wrapper textarea {
    min-height: 120px; /* Taller height for message area */
    resize: vertical; /* Allow vertical resizing */
}
/* Two-column layout for email and phone */
.form-row-two-columns {
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 20px; /* Space between columns */
    margin-bottom: 10px; /* Space below the row */
}

.form-row-two-columns label {
    flex: 1 1 calc(50% - 10px); /* Each item takes 50% minus half the gap */
}
/* Submit Button Styles */
.cf7-form-wrapper input[type="submit"] {
    display: flex; /* Use flexbox for icon and text alignment */
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right, #35824F, #44A866); /* Orange to red gradient */
    color: #ffffff; /* White text */
    padding: 15px 30px;
    border: none;
    border-radius: 50px; /* Very rounded button */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(97, 206, 112, 0.4); /* Larger blur radius for softer shadow */
    width: auto; /* Adjust width to content */
    margin: 20px auto 0 auto; /* Center the button */
    text-align: center;
    direction: rtl; /* Ensure RTL for button content */
}
.cf7-form-wrapper input[type="submit"]:hover {
    background: linear-gradient(to right, #44A866, #35824F); /* Reverse gradient on hover */
    box-shadow: 0 10px 25px rgba(97, 206, 112, 0.6); /* More prominent shadow on hover */
    transform: translateY(-2px); /* Slight lift effect */
}
/* Contact Form 7 specific messages (success, error) */
.wpcf7-response-output {
    margin-top: 20px;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    text-align: center;
    direction: rtl;
}

.wpcf7-mail-sent-ok {
    background-color: #d4edda; /* Light green */
    color: #155724; /* Dark green text */
    border: 1px solid #c3e6cb;
}

.wpcf7-mail-sent-ng,
.wpcf7-validation-errors {
    background-color: #f8d7da; /* Light red */
    color: #721c24; /* Dark red text */
    border: 1px solid #f5c6cb;
}

.wpcf7-spam-blocked {
    background-color: #fff3cd; /* Light yellow */
    color: #856404; /* Dark yellow text */
    border: 1px solid #ffeeba;
}

/* Hide labels if you only use placeholders, as per the image */
.cf7-form-wrapper label {
    display: block; /* Ensure labels take full width */
    margin-bottom: 20px; /* Remove default label margin if you're using placeholders */
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .cf7-form-wrapper {
        padding: 20px;
        margin: 20px auto;
    }

    .form-row-two-columns label {
        min-width: 100%; /* Stack columns on small screens */
    }

    .form-row-two-columns {
        gap: 0; /* Remove gap when stacked */
    }
}