/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
b, strong {
    font-weight: 700;
}

.login-button svg {
  fill: #C2D5A3;
}

.login-button:hover svg {
    fill: #22382D;
  }


.hero-menu .elementor-nav-menu a {
    position: relative; /* Ensure the pseudo-element positions relative to the link */
}

.hero-menu .elementor-nav-menu a:after {
    content: '';
    display: block;
    height: 2px; /* Adjust height as needed */
    width: 0;
    background-color: #c3d5a3;
    transition: width 0.3s;
    margin: 0 auto;
    position: absolute;
    bottom: 0; /* Position it right below the text */
    left: 0;
    right: 0;
    margin: auto; /* Center the pointer */
    /* transform: translateX(12px); /* Adjust by half the padding (24px / 2) */
}

.hero-menu .elementor-nav-menu a:hover:after {
    width: calc(100% - 48px); /* Subtract the padding to match the text width */
}

/* Scoped styles for custom contact form */
.custom-contact-form .row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15px;
}

.custom-contact-form .column {
    width: 48%;
}

.custom-contact-form label {
    display: block;
    margin-bottom: 5px;
    font-size: 14px;
    font-weight: bold;
    color: #333;
}

/* Transparent input fields */
.custom-contact-form input,
.custom-contact-form textarea {
    width: 100%;
    padding: 23px;
    border: 1px solid #C2D5A333;
    background-color: transparent;
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #FFF;
    border-radius: 5px;
    outline: none;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

/* Placeholder styling */
.custom-contact-form input::placeholder,
.custom-contact-form textarea::placeholder {
    color: #C2D5A3;
}

/* Focus and select state: white background with 10% opacity, white text, no border */
.custom-contact-form input:focus,
.custom-contact-form textarea:focus,
.custom-contact-form input:active,
.custom-contact-form textarea:active {
    background-color: rgba(255, 255, 255, 0.1); /* White background with 10% opacity */
    color: #FFFFFF; /* White text */
    border: none; /* Remove border */
    outline: none; /* No outline */
}

/* Submit button styling */
.custom-contact-form .submit-btn {
    text-align: left;
}

.custom-contact-form .submit-btn input[type="submit"] {
    display: inline-block;
    width: auto;
    cursor: pointer;
    transition: background-color 0.3s;
    background-color: #C2D5A3;
    color: #22382D;
}

.custom-contact-form .submit-btn input[type="submit"]:hover {
   background-color: #22382D;
   color: #C2D5A3;
}

@media only screen and (max-width: 767px) {
	.custom-contact-form .column {
		width: 100%;
	}
	
	.custom-contact-form .row {
    	display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
        flex-direction: column;
	}
	.custom-contact-form .submit-btn input[type="submit"] {
		width: 100%;
	}
}


  /* Wrapper around the form */
    .form-wrapper {
      margin: 0 auto;   /* Centers the form wrapper */
    }

    /* Rows: each p contains two labels side by side */
    .form-wrapper p {
		display: flex;
		gap: 20px;
     }

    /* Each label (and therefore input) takes up half the width */
    .form-wrapper p label {
         width: 50%;
    }

    /* On smaller screens, labels go full width for a single-column layout */
    @media (max-width: 600px) {
      .form-wrapper form p label {
        width: 100%;
        margin-bottom: 1rem;
      }
    }