/*
Theme Name: Olaya Theme
Theme URI: https://example.com/my-custom-theme
Author: Ayat Ahmed
Author URI: https://www.facebook.com/ayatahmed6/2rrrrrewwetwyuios
Description: A custom WordPress theme built from scratch.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-custom-theme
Tags: custom, responsive, blog, minimal
*/
li.menu-item {
  display: inline;
}
.main-footer .lang-item a span,
.topbar .lang-item a {
  display: flex;
  align-items: center;
  flex-direction: row;
  gap: 10px;
}
form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
[dir="ltr"] .wpcf7 {
  direction: ltr !important;
}
[dir="rtl"] .wpcf7 {
  direction: rtl !important;
}
.links-column li {
  display: inline-block;
}

/* GENERAL STYLES */
.input-container {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  gap: 0.5rem; /* gap-2 */
}

.input-container label {
  display: flex;
  width: 100%;
  position: relative;
  z-index: 1;
  font-weight: 400; /* font-normal */
  font-size: 1rem; /* font-size-16 */
  transition: all 0.3s ease-in-out;
  gap: 0.25rem; /* gap-1 */
  margin-bottom: 0.5rem;
}

.required {
  color: #ff5733; /* Adjust as needed */
}

/* INPUT FIELDS */
.form-input,
.form-textarea {
  width: 100%;
  display: block;
  position: relative;
  z-index: 10;
  outline: none;
  background-color: transparent;
  color: #666;
  font-size: 1rem; /* font-size-16 */
  font-weight: 400; /* font-normal */
  border: 1px solid rgba(65, 65, 65, 0.3);
  padding: 0.75rem; /* p-3 */
}

.form-input:focus,
.form-textarea:focus {
  border-color: #1a73e8; /* focus-within:border-main */
}

/* TEXTAREA */
.form-textarea {
  resize: vertical;
  height: 250px;
}

/* ERROR MESSAGE */
.error-msg {
  width: 100%;
  font-size: 0.875rem; /* font-size-14 */
  color: #dc2626; /* text-red-500 */
}

/* SUBMIT BUTTON */
.submit-container {
  width: 100%;
  margin-top: 1.25rem; /* mt-5 */
}

form .main-button {
  display: inline-block;
  background-color: #1a73e8; /* bg-main */
  color: white;
  font-weight: 600; /* font-semibold */
  padding: 0.5rem 1.75rem; /* px-7 py-2 */
  cursor: pointer;
  transition: all 0.3s ease-in-out;
  border: none;
  pointer-events: none;
}

form .main-button:hover {
  background-color: #4595fe; /* hover:bg-second */
}

/* ---------------------------- */
/* RESPONSIVENESS (MEDIA QUERIES) */
/* ---------------------------- */

/* Tablet (768px and up) */
@media (min-width: 768px) {
  .input-container {
    gap: 1.5625rem; /* gap-[25px] */
  }

  .form-input,
  .form-textarea {
    padding: 0.75rem; /* p-[12px] */
    font-size: 1rem; /* font-size-16 */
  }

  form .main-button {
    padding: 1rem 1.75rem; /* py-4 px-7 */
  }
}

/* Large Screens (1024px and up) */
@media (min-width: 1024px) {
  .input-container {
    gap: 0.802vw; /* gap-[0.802vw] */
  }

  .form-input,
  .form-textarea {
    padding: 0.577vw; /* lg:p-[0.577vw] */
    font-size: 1rem; /* font-size-16 */
  }

  form .main-button {
    padding: 0.8333vw 1.666vw; /* lg:py-[0.8333vw] lg:px-[1.666vw] */
  }
  .form-textarea {
    height: 8vw;
  }
}

.map-wrap {
  iframe {
    width: 100% !important;
    height: 450px !important;
  }
}