/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

.rotating-text {
  direction: rtl; /* Right-to-Left text direction for Arabic */
  text-align: right; /* Align text to the right */
  font-family: 'Noto Kufi Arabic', serif; /* Specify your font */
  color: #fdb813; /* Gold color for text */
  font-size: 24px; /* Adjust font size as needed */
  font-weight: 400; /* Normal font weight */
  white-space: nowrap; /* Prevent text from wrapping to ensure the typing effect looks continuous */
  overflow: hidden; /* Hide overflow to maintain container size */
  border-right: 3px solid #fdb813; /* Cursor-like effect */
  width: fit-content; /* Fit the width to the content size */
  margin: 0 auto; /* Center the text container if desired */
  padding-right: 10px; /* Spacing for the cursor effect */
}

.text-item {
  display: none; /* Initially hide text items */
}

.text-item.active {
  display: inline-block; /* Show the active item */
  animation: blinkCursor 0.75s steps(1) infinite; /* Cursor blinking effect */
}

@keyframes blinkCursor {
  from { border-right-color: #fdb813; }
  to { border-right-color: transparent; }
}


/* Custom CSS for RTL Contact Form */
.rtl-form {
    direction: rtl;
    text-align: right;
    background-color: #1e3a5a; /* Primary color */
    padding: 20px; /* Add padding around the form content */
    border-radius: 40px; /* Optional: adds rounded corners to the form */
}

.rtl-form .form-row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.rtl-form .form-column {
    flex: 0 0 48%;
    max-width: 48%;
    box-sizing: border-box;
}

.rtl-form fieldset {
    border: 1px solid #ddd;
	border-radius:20px;
    padding: 10px;
    margin-bottom: 20px;
}

.rtl-form legend {
    padding: 0 10px;
    width: auto;
    color: white;
}

.rtl-form input,
.rtl-form textarea,
.rtl-form select {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
	border-radius:10px;
	font-size: 19px; /* Adjusted font size for better visibility */
}

input.my-submit-button {
    background-color: #fdb813; /* Alert color */
    color: #1e3a5a; /* Primary color for text */
    border: 2px solid #fdb813; /* Border color matches background */
    border-radius: 57px;
    padding: 10px 20px; /* Adjust padding to fit icon */
    cursor: pointer;
    font-weight: bold; /* Adjust based on your preference */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition for hover effects */
    display: inline-block;
    text-align:center;
}

input.my-submit-button:hover {
    background-color: transparent; /* Background becomes transparent */
    color: white;
    border-color: #fdb813; /* Maintains the alert color border */
}
@media (max-width: 768px) {
    .rtl-form .form-column {
        flex: 0 0 100%;
        max-width: 100%;
    }
}


/* End of Custom CSS for RTL Contact Form */

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}